Published in


Understanding the CSS Box-Model

CSS Basics

Everything is Boxes

Every HTML element is a box that can contain content.
Precisely, there are two basics types of boxes:

Firefox 3D debugging (in the past)

Block Boxes

Block boxes, by default, take all the space throughout the width of the container.

Inline Boxes

Inline boxes, by default, take the space according to the content wrapped. The most common HTML element for an inline box is the <span> HTML element.

<div>I'm a DIV</div>
<span>I'm a SPAN</span>

CSS Display Property for Behavior

The <div> and the <span> elements use the same behavior of basic styles as that of the browser. The behavior of all the boxes comes from the display property of CSS. The basic values of the display property are the inline and the block value.

display: block; /* browser default styles */
display: inline; /* browser default styles */
display: inline;
display: block;

Under the Hood of CSS and HTML

Interestingly, all the HTML elements use the display property with the inline value.

The initial value of the display property is inline

The Big Question

Now the question that we need to ask ourselves is that:

The Browser User-agent-stylesheet

When we create web pages, the browser loads its own CSS stylesheet before we even load a single line of CSS.

display: initial; /*= equal to inline */

Controlling the Box-model

Every HTML element is a box that we can control on the outside space with the margin property.

Demonstration of the Box model by Kelly Vaughn

Styling the Box

In CSS, we can control the view of the HTML elements of the box according to all its parts i.e., content, padding, border, and margin.


Padding is the inner space between the content and the border of the box. You can use the same value all across the box, for example, padding: 20px; or you can give padding to only one side of the box, for example, padding-right: 10px;.

padding-top:    10px; 
padding-right: 20px;
padding-bottom: 25px;
padding-left: 5px;
/* all 4 values eqpal to this */
padding: 10px 20px 25px 5px;
padding: 10px; /* Apply to all four sides */
padding: 10px 20px; /* vertical | horizontal */
padding: 10px 20px 30px; /* top | horizontal | bottom */


There are a lot of possibilities for styling borders in 2020. However, there are two basic styles for seeing the border on HTML elements.

  • border-style - mostly used with one of the common keywords: solid, dashed or dotted.
  • border-width, tells the browser about the size of the border. Usually, we use pixel value for this property, for example, border-width: 5px;.
  • border-color, by default, the value uses the currentColor of the text. However, we prefer to define it even if we don’t have to. For example, border-color: red;.
border: solid 5px red;
border-width: 5px 10px 15px 20px; 
border-style: solid dashed dotted double;
border-color: red green blue brown;


Margins are the outer spaces between boxes.

margin-top:    10px; 
margin-right: 20px;
margin-bottom: 25px;
margin-left: 5px;
/* all 4 values eqpal to this */
margin: 10px 20px 25px 5px;
margin: 10px; /* Apply to all four sides */
margin: 10px 20px; /* vertical | horizontal */
margin: 10px 20px 30px; /* top | horizontal | bottom */

Understanding the Sizing of Boxes

By default, the width: auto value of HTML block elements, is equal to the width of the row.

Where Developers Fail to Understand the Box-model?

This basic calculation is straightforward when you only give the width for an HTML element.

The Tricky Question

The tricky question for beginner developers is about the width size of an HTML element which has width: 300px , padding: 10px and border: solid 2px green ?

width: 300px;
padding: 10px;
border: dashed 2px green;
Total width equal to 324px

The New box-sizing Property

The box-sizing property gives you the possibility to tell the browser what size property (width or height) is included.

  • content-box - include only the content.
  • border-box - include content + padding + border.

Resetting Everything to Border-box

In 2020, it is better to reset all the HTML elements to the border-box value. This, in most cases, is a better way to calculate size.

box-sizing: border-box;
box-sizing: content-box (default) VS box-sizing: border-box

Future Reading

It’s only the beginning of what we can control on the box-model of CSS and HTML.

background-origin & background-clip CodePen

More, More and More

There are even more ways to control the CSS boxes.

To Summarize

In this article, I demonstrated the most important things to understand how the box-model of CSS and HTML is working. Besides, I taught you a little bit about the browser’s history and interesting things about their working.

Final Words

I hope you’ve enjoyed this article and learned something new.
If you like this article, I would appreciate applause and sharing 🙂.

Get more content like this

I’m starting a new community of CssClass.com on Facebook and LinkedIn.



Open-source projects, articles, tutorials and more.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store