CSS for Beginners

The box model explained

Cem Eygi
Cem Eygi
Oct 16 · 5 min read
Photo by Headway on Unsplash

Every HTML element on a webpage can be considered a box and, in web development, we use CSS to style and align them. Understanding the concept of these boxes is important to improve your CSS skills.

An element (box) consists of a content field and additional properties such as paddings, borders, and margins. This structure is called the CSS box model and, in this post, you’re going to learn how the box model works.


Structure of the Box Model

The Box Model

From the box model’s view of perspective, this is how an element in a webpage looks, boxes inside boxes. According to the box model, an element consists of four parts:

  • Content (element itself).
  • Padding (inner space).
  • Border.
  • Margin (outer space).

And each box has four sides: top, bottom, left, and right. Therefore, we can apply paddings, borders, and margins on each of the sides separately or all together:

Now, let’s see them in more detail.


Content

The content area is the element itself without any paddings, borders, or margins. Considering that we have a <p> tag with some text inside:

The Content Area of the <p> tag (light-blue background)

The light-blue field is the content area of the element. As the <p> tag is a block-level element, it takes the full width of the page.

The element also has a width and a height property. These properties adjust themselves automatically based on the size of the content, unless we define them:

Width and height are here 100px

However, if the content gets too large, giving a fixed height to the element causes an overflow problem:

Tip: It’s better not to give a height property to elements, but if we have to, we can fix this issue with the Overflow property.


Padding Area

The next part of the box model after the content is the padding area. If you view the picture at the beginning of this post again, you will see that the padding area is the field between the content and the borders of the element.

We give padding to elements to create some empty space between the content and the borders.

Element without padding:

Element with 20px of padding:

Padding adds space between the content and borders

Recalculation of Width and Height

Here is the part where people get confused. I gave 100px to width and height of the element but after declaring the padding property, the box got bigger.

So, when we inspect the element, we see that the content still has 100px of width and height, but its actual width and height is 140px:

Screenshot from Firefox Dev Tools

This happens because, according to the box model, not only the content but also the padding and borders are counted as part of the element. So, that’s why the correct calculation should be like this:

Actual width = border-left + padding-left + width +padding-right + border-right.

Actual height = border-top + padding-top + height +padding-bottom + border-bottom

or

You can use another CSS property, box-sizing, instead. Box-sizing gives you the option to omit padding and borders for the calculation. (I also recommend you use it.)


Borders

As we know from the real world, borders are the ending lines of something or somewhere. It’s the same with the box model. Borders are the ending lines of an element.

The common usage of the border property is with a shorthand:

Which includes the following properties at once:

  • border-width
  • border-style (required)
  • border-color

It is optional to define border-width and border-color properties, but they don’t work without a border-style.

See here for more information about borders.


Margin Area

The margin area is the last and the outer space of the box model. We use margins to create space between elements:

This is what they look like without margins:



Summary

The box model is one of the essential parts of CSS and developers must learn it sooner or later.

I hope that, after reading my article, you have a better understanding. If you have any questions, don’t hesitate to ask.

Thank you for reading.

Better Programming

Advice for programmers.

Cem Eygi

Written by

Cem Eygi

Front-end Developer — Visit Our Blog Website: www.codingdocs.com

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade