Understanding the CSS Box-Model
CSS Basics
The box-model is one of the basics things in CSS and HTML. But even in 2020, lots of web developers don’t understand the idea of how box-model behaves.
So, in this article, I will explain the basic logic of the box-model and why it is called the box-model. Besides, I will also give you a deeper insight into the behavior of the box-model.
Indeed, the name ‘box-model’ exists because, in the browsers, everything is built from boxes. So, let’s start exploring these boxes!
Everything is Boxes
Every HTML element is a box that can contain content.
Precisely, there are two basics types of boxes:
⦁ Block boxes
⦁ Inline boxes.
In the past, the Firefox browser had a feature that showed all the container boxes in a 3D visual way. For me, it was one of the best visual examples for beginner web developers in the web industry to understand it.
Those two types of boxes, were existed from the beginning of the web, let’s talk about them:
Block Boxes
Block boxes, by default, take all the space throughout the width of the container.
The common HTML element for a block box is the <div>
HTML element.
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.
And here you can guess it right that the <span>
HTML element, by default, uses the value of inline
while the <div>
HTML element, by default, uses the value of block
.
div{
display: block; /* browser default styles */
}span{
display: inline; /* browser default styles */
}
And now, if you want, you can change the behavior of every HTML element to your desired behavior.
For example, you can convert it into an opposite behavior:
div{
display: inline;
}span{
display: block;
}
Note: Most of the time, we don’t play with the display
like in the last example.
Now, we use the <span>
HTML element and more other inline HTML elements, such as the anchor tag of links, <a>
, to add some styles for the text.
Under the Hood of CSS and HTML
Interestingly, all the HTML elements use the display
property with the inline
value.
You must be wondering how do I know this? And why I’m saying it?
Because every property in CSS has only one default value and for the display
property, the initial
value is always inline
.
You can find this information for the initial
value of every property of CSS in the MDN of Mozilla.
The Big Question
Now the question that we need to ask ourselves is that:
Why does the HTML element of <div>
behave with the display: block
value?
The answer is in the browser’s user-agent-stylesheet. So, let’s talk about it.
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.
And here comes the funny part:
All the HTML elements which by default have a value of block
, this is only because the browser decides to add them the display
property with a value of block
.
Let me repeat it; these styles aren’t the default styles of CSS. And if we reset a <div>
HTML element to its initial
display, it will become equal to inline
.
The only reason that we have those differences between different kinds of HTML elements is that the browser loads its own CSS, and we have become used to it.
div{
display: initial; /*= equal to inline */
}
To get an idea of how the browser’s user-agent-stylesheet looks like, you can take a look at the WebKit user-agent-stylesheet of Chrome.
Now, if you want to know more about the initial
value and other CSS reset keywords value, you can read my previous article “Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords”.
Controlling the Box-model
Every HTML element is a box that we can control on the outside space with the margin
property.
After that, we can give it a border
.
Here, with the padding
property, we can also provide the inner spaces between the content and the border inside the box.
The funny image from Kelly Vaughn in her twitter account explains the box-model in the best way.
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
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;
.
Besides, there are options for shorthand writing, which allow you to give a different value to each side, without writing them separately.
For example, padding: 10px 20px 5px 15px;
, equal to padding-top: 10px
, padding-right: 20px
, padding-bottom: 5px
and padding-left: 15px
.
And there are even more possibilities for writing shorthand.
Examples for writing way for padding:
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 */
Borders
There are a lot of possibilities for styling borders in 2020. However, there are two basic styles for seeing the border on HTML elements.
Precisely, there are quite a lot of properties for creating a border. The three basic properties for creating borders are:
border-style
- mostly used with one of the common keywords:solid
,dashed
ordotted
.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 thecurrentColor
of the text. However, we prefer to define it even if we don’t have to. For example,border-color: red;
.
Most of the web developers don’t use those three properties separately. Instead, there is a shorthand that gives you the possibility to write all of them together, the border
shorthand property.
With this property, we can write only border: solid 5px red
.
border: solid 5px red;
Interestingly, we can control on every side of the padding in the same way we control all the sides of the borders separately.
In fact we can also control and give a different style to each part of the borders, for example:
border-width: 5px 10px 15px 20px;
border-style: solid dashed dotted double;
border-color: red green blue brown;
CodePen Different Types of Borders Example
Margins
Margins are the outer spaces between boxes.
But these outer spaces can’t get other styles, for example, the background color.
The values of margin property, works in a similar way like the padding property, with all the same shorthands:
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 */
Collapse behavior
Now, when two HTML block elements have vertical margins, and these two margins collapse into one, here the bigger will dominate.
Here, this visual example is the best way to understand it:
Collapse Margins CodePen Example
Understanding the Sizing of Boxes
By default, the width: auto
value of HTML block elements, is equal to the width of the row.
But we can also give a specific width value to the HTML elements, for example, width: 300px;
.
Where Developers Fail to Understand the Box-model?
This basic calculation is straightforward when you only give the width for an HTML element.
But in a real project, you provide HTML elements with width and padding and sometimes borders too.
In this calculation, most of the junior developers fail to understand the basics of how sizing works in browsers.
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
?
.box{
width: 300px;
padding: 10px;
border: dashed 2px green;
}
The conventional thinking is that the width includes the padding and the borders.
But it wasn’t like that at the beginning of the web browsers.
And if you gave those properties: width of 300px + two sides of padding (20px) + two sides of borders (4px), it meant that the box HTML element size was equal to 324px.
Example:
Honestly, this way of calculation size isn’t intuitive.
And then in 2009/2010 came a new property to CSS, the box-sizing
property, that changed all this behavior.
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.
By default, it included only the content (content-box
value).
But now, you can tell the browser to include the padding and the borders in the calculation with the new value of border-box
.
content-box
- include only the content.border-box
- include content + padding + border.
This new possibility is a lot more intuitive to include the padding and the border in the size of the HTML element.
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.
Because it is easier, we can now see that in a lot of new websites, adding in the CSS Reset styles, reset for all HTML elements will behave as box-sizing: border-box
.
Resetting all HTML elements:
*,
*::before,
*::after{
box-sizing: border-box;
}
This way if we give an HTML element a width: 300px
, padding: 10px
, border: solid 2px green
and box-sizing: border-box
, the total width of this element will be 300px (and not 324px).
It also means that the content will shrink in this case to 276px width.
CodePen example of box that include box-sizing: border-box
Side by Side, both box-sizing methods:
Future Reading
It’s only the beginning of what we can control on the box-model of CSS and HTML.
For example, You can control where you want to put background-image
, on which part of the box-model with the background-origin
property, and if you want to clip it, you can use the background-clip
property.
You can read more about it in my previous article, “Say Hello to Background-Origin and Background-Clip, CSS New features!”
More, More and More
There are even more ways to control the CSS boxes.
The Border Property — has more possibilities like the border-radius
and the border-images
.
The new Logical Properties — Changes the way that the box-model works. This new way of thinking will bring us better support for different types of languages. In this new method, instead of working with physical properties, CSS brings us new logical properties.
Layout — for layout pages in 2020, we have more new possibilities, like the latest display of CSS: CSS flexbox and CSS Grid.
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 🙂.
You can follow me via Twitter and Linkedin.
Besides, you can find more of my content on my website — eladsc.com.
Who Am I?
I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture.
Get more content like this
I’m starting a new community of CssClass.com on Facebook and LinkedIn.
Signup if you find it interesting 🤓
Articles, open-source projects, and deep-dive into CSS topics.
More content is coming soon at CssClass.com!