Front-End Tutorials: CSS Box Model
These Front-End Tutorials articles will be used as my personal learning notes but at the same time as a way to distribute information to everyone interested in learning Front-End Engineering.
This blog post will cover the CSS Box Model.
What is the Box Model?
If we want to understand the basics of how the HTML elements are positioned and displayed in a web-page we need to start by mastering the box model.
So basically the box model is just a concept that describes how the browsers interpret the HTML elements. Every element lives inside a box and that is what the box model means.
Properties of the Box Model
The box model properties is what the browser will use to design the box around the specified HTML element. These properties are:
widthandheight— that describes the size of the content area;padding— that describes the amount of space between the content and the border;border— that describes the thickness and size of the border surrounding the content plus the padding;margin— that describes the amount of space between between the border and the edge of the element.
Height and Width
By default the height and width of an HTML element is set to be the size of its content. But we can use these two properties to change the size of the box around the content.
If we write a <p> element with some content but without any box styling we’ll have something like this:
The box around the paragraph is our box with a 1px solid border (we’ve styled the border just to make it easier to understand the concept).
<p>Some content.</p>
---
p {
width: 100px;
height: 50px;
}Above is an example on how to change these properties to manipulate the size of the box around our element. This is what we get after it:
We can see now that the box around the content has shrunk in width and expanded in height. This means that we are now in full control of the size of the box. Let’s see what happens if we make the width smaller than the content?
We can see that if the content is bigger than the size of the box, it will wrap to fit in the box as best as possible.
Border
The border is what surrounds the HTML elements. It is what we’ve used in the previous examples to demonstrate the size of the element and how that changed.
Borders also have properties that allow them to manipulate the border like width, style and color.
p {
width: 100px;
height: 50px;
border: 3px dotted coral;
}This new example will create the following output:
The configuration is: first value the width, then the style and finally the color.
Until now we’ve just seen squared borders with right angles, but we can modify this also to create different shapes. This new property basically defines that the four corners of the border will have a radius of a circle of certain size.
p {
width: 100px;
height: 50px;
border: 1px solid coral;
border-radius: 10px;
}In the example above we’ll have a border where all the four corners will be round with the shape of a circle with a 10px radius as we can see on the outcome below.
As a side note, it’s possible to create a perfect circle with the border-radius by first creating a square (by having the same height and width) and then making the border-radius to be 50% (which means, half of the width):
p {
width: 150px;
height: 150px;
border: 1px solid coral;
border-radius: 50%;
}And this create the following result:
Padding
Padding is how we define the space between the content of a box and its borders.
We can control the padding of the box model with 4 properties:
padding-toppadding-rightpadding-bottompadding-left
We have the following example where we have the same box but with the previous different settings:
p {
width: 100px;
height: 100px;
border: 1px solid coral;
border-radius: 5px;
}
#padding-top {
padding-top: 50px;
}
#padding-right {
padding-right: 50px;
}
#padding-bottom {
padding-bottom: 50px;
}
#padding-left {
padding-left: 50px;
}
What we can conclude from these examples is that the values that we configure on padding will add to the height or/and the width that we’ve on the element configuration.
For example, the “base padding” element has a 100px by 100px dimension. On the “top padding” element, we now have a 150px by 100px dimension box, because we had 50px to the original dimensions of the box. The same happens on all the examples.
All of this can be seen by the DevTools box model tool that helps understand the dimensions of every element.
Padding Shorthand
4 Values notation:
A different way to configure padding is by using a one-liner configuration where the values are ordered by the clockwise rotation. Fox example, we could create a single element with 50px of padding in top and right directions but 10px in the bottom and left like this:
p {
padding: 50px 50px 10px 10px;
/* top right bottom right */
}3 Values notation:
This notation uses almost the same logic as the above but instead of describing all 4 directions, it describes the top, the left and right sides with the same value, and the bottom one like this:
p {
padding: 10px 50px 20px;
/* top sides bottom */
}2 Values notation:
This is an easy solution if we have the same values for top and bottom and then for left and right.
p {
padding: 10px 50px;
/* top/bottom sides */
}1 Value notation:
If we want the same size in all directions we can use the more simple one-liner like this:
p {
width: 100px;
height: 100px;
border: 1px solid coral;
border-radius: 5px;
padding: 50px;
}Margin
Margin is how we define the space outside the box that separates the element from the remaining HTML elements around it.
The margin uses exactly the same notation logic as padding but outside of the box. A few simple examples:
/* Using full notation */
p {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
/* Using 4 value notation */
p {
margin: 40px 30px 20px 10px;
}
/* Using 3 value notation */
p {
margin: 50px 30px 20px;
}
/* Using 2 value notation */
p {
margin: 50px 35px;
}
/* Using 1 value notation */
p {
margin: 50px;
}Center Content
The margin property lets us center content relative to its parent.
p {
width: 100px;
margin: 0 auto;
}For this to work, initially we must set the width of the element since the default value is the full width of its parent. Then we can configure the auto value using the “2 Value notation” for the left and right values and the browser will adjust the left and right margins of the element so that it stays in the center.
Min and Max dimensions
The size of the box can vary depending on the size of the screen. To better control this behaviour we can configure min-width, max-width, min-height and max-height.
Overflow
When we create maximum restrictions to the size of the element we might get malformed elements where, for example, the text of a paragraph can go beyond the borders of the element.
In that case, we can use the overflow configuration to hide the text inside the element and be able to scroll over it.
p {
border: 1px solid coral;
border-radius: 5px;
max-height: 150px;
max-width: 150px;
overflow: scroll;
}
The New Box Model
The box model that we’ve learned above has quite a big problem while developing a web page: it’s not easy or intuitive to know exactly the size of the box around each HTML element.
This happens because the actual size of the box is the size that we configure for the content plus padding and border size.
p {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
}In the above example the vertical size of the box will be 222px and the horizontal size 322px.
As we can see, it’s not clear, when you see the element configuration, its actual size. This old model is called content-box.
The new box model, called border-box, makes this way simpler since when we configure the size of the element (using height or width) we will actually configure the size of the box (content + padding + border) and the size of the content will then be calculated by the browser automatically.
For that we can easily configure the following in the top of the CSS file:
* {
box-sizing: border-box;
}