CSS Box Model

Keywords

css, box model, height, css box model, css height, dataidea, data science, web development, website

Photo by DATAIDEA

Box Models

CSS box model is the foundataion of desing and layout of the web.

It is simply a box or a rectangular box.

Note!

Before we study and create CSS Layouts, we have to understand CSS box models first.

In CSS box model, each element is represented as a box with the following parts or properties

  • Content: also called content box/area; it is the areawhere the content of the box is displayed
  • padding: the space or area between the outer edge of the content box and the inner edge of the border; it is transparent.
  • Border: the area between margin and the padding; its width, style and color can be changed
  • Margin: the area or space outside the border or outside the CSS box; it is transparent

Each part or property is built up around another layer by layer.

To better understand the CSS box model. Here’s an illustration.

CSS Box Model

Example:

div {
    padding: 20px;
    border: 5px solid black;
    margin: 40px;
}

Output:

Width and Height of a CSS Box

To get the total width or height of a CSS Box, we have to use the following formulas.

CSS Box’s width = left border’s width + left padding’s width + content box’s width + right padding’s width + right border’s width CSS Box’s height = left border’s height + left padding’s height + content box’s height + right padding’s height + right border’s height

For example, if a <div> element has the following CSS declarations…

div {
    width: 200px;
    height: 200px;
    padding: 50px;
    border: 20px solid black;
}

… its total width/height would then be 340px

CSS Box’s width = 20px (left border) + 50px (left padding) + 200px (content box’s width) + 50px (right padding) + 20px (right border) = 340px

CSS Box’s height = 20px (top border) + 50px (top padding) + 200px (content box’s height) + 50px (bottom padding) + 20px (bottom border) = 340px

You must have noticed that the width and height CSS properties only set the width/height of the content box not the entire CSS box:

Box Model Width Height

Ins’t that annoying? Yes, in some cases.

Forexample if we only want a CSS Box to occupy the 50% of the width including the border and the padding.

To achieve something like that, we need the box-sizing CSS property be set to border-box.

div {
    box-sizing: border-box;
    width: 200px;
    height: 200px; 
    padding: 50px;
    border: 20px solid black;
}

Result:

Now the final rendered width/height of the element is only 200px

It is because the padding and borders are already included inside teh 200px

Note!

It is highly recommended to use this approach in web design.

Here is the illustration of how it works.

Box Model Border Box

CSS Box Terminologies:

  • content box/area - the area where the content of the box is displayed
  • padding box/area - the content area and the element’s padding combined
  • border box/area - the padding area and the element’s borders combined
  • margin box/area - the border area and the element’s margins combined

To be among the first to hear about future updates of the course materials, simply enter your email below, follow us on (formally Twitter), or subscribe to our YouTube channel.

Back to top