Making Sense of the CSS Box Model

Today’s course, titled Making Sense of the CSS Box Model, was pretty much a review of an earlier course I took titled CSS: Core Concepts. This course, taught by Morten Rand-Hendriksen, had a relatively straightforward message: the web is made of boxes. With this philosophy, we began to cover how one designs a website composed of these boxes.

We also took a brief look at the origins of the box in typography and understanding the basics of type in web design. The overall point of this section was to show how line-height, kerning, leading, and a flurry of other typography terms applied to the CSS box model it their own way. Essentially, the size of the box is relative to the size of the content. If either the amount of content, or the size of the content, increases then the size of the box containing it increases as well.

One of the chapters in this course which I found particularly helpful discussed the four parts of these boxes in CSS. Working from the inside out, these parts are the content, padding, border, and margin. While this is pretty simple when looking at the model inside your web browser’s developer tools, I found Morten’s coverage of the topic help clear any confusion I had regarding the padding and margin. Quite simply:

  1. Content: This can be the text in a paragraph, an image, etc.
  2. Padding: Increases the amount of space between the border and the content and contributes to the overall size of the element.
  3. Border: Can have any size the developer defines and increases the overall size of the element.
  4. Margin: Increases the size between the border and other elements and does not contribute to the overall size of the element.

20160912-CSS-Box-Model

That said, if I were to have a photo with a width of 50px and added a padding of 10px, then the element at that point would be 70px wide. Next if I were to give this element a border of 2px, the resulting element would now be 74px wide. Finally, if I were to add a margin of 30px to this element, the size would remain at 74px but with 30px of space between it and other elements to the left and right of it. Of course when one assigns these values, one increases the height as well as the width but, for the sake of example, I was only dealing with width.

Tomorrow I will tackle the three hour course titled CSS Fundamentals by one of my favorite instructors James Williamson.