The Box Model

Lessons / ,

CSS Margin, Padding, and Borders

In web development, the CSS box model refers to the composition of a webpage or HTML page from blocks or boxes using CSS. Specifically, the box model describes how the size of each such block and its content is determined through styling instructions. The guidelines of the box model are described by the World Wide Web Consortium (W3C).
– Wikipedia

View Video Lesson
web site as rectangle blocks

HTML Elements as Boxes

One way to envision a web page is by thinking of it as a bunch of “boxes,” or rectangles. There are browser tools (e.g. Chris Pederick’s Web Developer Toolbar) that allow you to display any page’s elements’s with outlines. With that said, each element, or more accurately each block-level element, has four key attributes that directly impact the overall size of the “box.”

  1. Width (and height too)
  2. Padding
  3. Border
  4. Margin

For a div with the default box-sizing: content-box settings, the total rendered width will include a total of all four properties (width + padding + border + margin). The width property will refer to the most inward width of the content inside of the div, then each of the other three properties (padding, border, and margin) will be added to the width.

For a div with box-sizing: border-box settings, the total rendered width will not include the padding and border, and only include a total of the width + margin. The width property in this case, will refer to the most inward width of the content inside of the div + padding + border. This can be helpful when making visual adjustments to component elements inside of a pre-set grid system (e.g. adding a thick border, increasing padding, etc.).

See the Pen Box Model by kccnma (@kccnma) on CodePen.0

Since default content-box elements can be difficult at times to manage (e.g. when dealing with different grid systems for layout), some developers choose to convert all of their elements to border-box like this:

* {
  box-sizing: border-box;
}

Normal Flow

Normal flow is the default way that html elements are rendered, or laid out, by the browser. For most browsers with default settings elements will render from the top-down and left-to-right, with block level elements (e.g. divs) rendering at 100% width and stacking upon one another and inline elements (e.g. spans) rendering at the width of the content inside of them and next to one another on the same line similar to how text (letters and words) are rendered side-by-side by default, if there is enough space, and wrapping underneath one another when there is not enough space.

See the Pen Normal Flow: Block and Inline level elements by kccnma (@kccnma) on CodePen.0

Conclusion

Web pages are laid out (visually rendered by the browser) by default from the top-down and left-to-right according to the order of the elements and the display properties for each (e.g. block-level vs. inline-level). The dimensions for each element are calculated based upon the box-sizing properties (e.g. content-box or border-box).

  • box-sizing: content-box = width + padding + border + margin
  • box-sizing: border-box = width + margin

If you are ever confused, be sure to use your browser’s web developer tool to inspect your element and if not already set (and needed), remember the code for box-sizing: border-box:

selector {
  box-sizing: border-box;
}

Further Learning & Resources