Boxes, Boxes, Boxes…

Today I’ll cover another topic that came up during my mock JavaScript interview last month: the box model.

Boxing up Your Elements

The most important thing to remember is that CSS treats any HTML element as a box, either square or rectangular. That box comprises four components: content, padding, border, and margin. The content lies in the center of the box. Surrounding the content is the padding, and after that is the element’s border. Outside the border lies the margin.

Chrome DevTools provides a diagram of the box model. In case you’re not familiar with DevTools, you can view them by just right clicking on a web page and selecting “Inspect” from the menu that appears. The box model diagram lies at the bottom of the “Styles” panel. You’ll notice that the diagram portrays the content as blue, the padding as green, the border as orange, and the margin as red.

By the way, my interviewer mentioned that he found that many people confused the padding with the margin, so be sure you know the difference. Padding creates space between the content and the border, whereas the margin creates space between the element and adjacent elements. Another key issue we discussed in the interview concerned an element’s width and height. Unless you specify otherwise, an element’s total width and total height will include the padding and border. Consider the following CSS style rule:

div {
  width: 80px;
  height: 50px;
  padding: 10px;
  border: 5px solid black;
}

The style rule sets the element’s width and height to 80 pixels and 50 pixels, respectively. However, what will the element’s actual width and height be? If you thought the element would measure 80 x 50, you’d be wrong, because you didn’t take into account the padding and the border. The element will measure 110 x 80. How so? In addition to the width and height specified in the style rule, you need to factor in the padding (10 pixels on the right and 10 pixels on the left) and the border (5 pixels on the right and pixels on the left). In other words, it’s 80 + 10 + 10 + 5 + 5, for a total of 110 pixels wide. Calculating height follows the same principle. Adding in the padding on the top and bottom as well as the top and bottom borders, we get 50 + 10 + 10 + 5 + 5, for a total of 80 pixels.

Get Lyndel Barnes’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Introducing “Border-Box”

Is there any way to get around this default behavior of CSS? What if you’d like to set an element’s width and height without worrying about the padding and border interfering? I remarked to my interviewer that I preferred to set the box-sizing property to “border-box”, and he agreed that was the best practice to follow. Let’s add that to our example style rule:

div {
  width: 80px;
  height: 50px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

Adding the box-sizing property and setting it to “border-box” will cause the padding and border to be included in the width and height that we set, rather than increasing the width and height. Thus, our “div” in this case would be 80 x 50, just as we specified in the style rule.

If you’d like a clear and succinct video about this topic, watch Learn CSS Box Model in 8 Minutes, by Web Dev Simplified. In fact, I’ve watched multiple videos on this YouTube channel and found them extremely helpful. I would highly recommend the channel to anyone trying to learn web development.