From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

The box model properties

The box model properties - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

The box model properties

“

- [Instructor] Now that we've talked a bit about the normal flow, let's talk about how these elements interact with each other. Every element is viewed by the browser as a rectangular box. The CSS Box Model describes how these boxes are generated for each HTML element. There are five properties that can be used to define the Box Model. Width is used to set the width of the content area, which contains the actual content added between the tags. Height sets the height of the content area. Padding adds or removes the space within an element. Margin adds or removes a space around the element. And border is added between padding and margin. Let's look at how these properties are applied to block and inline elements. Block elements are the same height as the content contained between their tags, but they span the entire width of their containing element, even if the content itself doesn't. This is why block elements always start…

Contents