What is the CSS Box Model

All HTML elements can be visualized as boxes. The term “box model” is used when talking about design and layout.

The box model is a box that wraps around every HTML element. It consists of: the actual content, padding, borders, and margins. This can be set by using the box-sizing property in CSS.The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not. The image below illustrates the box model:

Illustration of the CSS box model

Explanation of the different parts

The box model allows us to add a border around elements, and to define space between elements.

We can control how the total width and height of an element is calculated with the box-sizing property. It can be set to:

Box Model Practice

what do you think the width of the div below will be?

HTML

  <div>
    woo a div
  </div>

CSS

  div {
    border: 4px solid black;
    padding: 10px;
    width: 200px;
  }

The width is going to be 228px.

Here is the calculation:
200px (width)
+ 20px (left + right padding)
+ 8px (left + right border)
+ 0px (left + right margin)
= 228px

This is because The box-sizing property defines how the width and height of an element are calculated Since we did not declare a box-sizing, it will default to content-box. The width and height of an element’s border or padding will be added to the final rendered width and height.

The total width of an element will be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element will be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added.

More Box Model Practice

what do you think the width of the div below will be?

HTML

  <div>
    woo another div
  </div>

CSS

  div {
    border: 3px solid red;
    box-sizing: border-box;
    padding: 40px;
    width: 200px;
  }

The width is going to be 200px.

This time, Since we declare the box-sizing to border-box, it’s width and height will include any border or padding you added, and the content box will shrink to absorb that extra width.

This usually makes it much easier to size elements.

Conclusion

Styling HTML can be tricky sometimes. Understanding the CSS box model and knowing how the width and height of elements are calculated can help. The box-sizing property controls how the width and height of an element are calculated: should they include padding and borders, or not. I think it is a good idea to set the box-sizing property to border-box on all elements so you don’t have to worry about the padding and border adding to the rendered width and height.

html
Indenting and Spacing in HTML

When you are writing HTML (or any other programming language), well-written code follows consistent indentation and spacing patterns.

javascript
what are closures

A closure is when a function can access its scope even if the function is executed outside of it.