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 and layouts

The box model and layouts - CSS Tutorial

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

Start my 1-month free trial

The box model and layouts

“

- [Instructor] An important part of creating layouts with any technique, is understanding how elements take up space. The CSS box model includes five properties that can be used to define the box model. All of these properties together determine the total area of each element. Let's look at an example. Right now I just have a div with some color and height and width applied to it. Let's add in the padding. Notice that the element has increased in size, even though we made no changes to the width or the height. The element is now the size of the width and the height plus the padding space. If we add border, the element will increase in size as well. If we add margin, it won't increase the size of the element, but it does increase the amount of space the element takes up. When the elements remain in their normal flow, this doesn't really affect the default layout too much. But when we start creating layouts that…

Contents