Previous chapter taught you that CSS views everything on the page as a box. A rectangle with a certain size and location. This is called “the box model”, which describes the properties you’ll probably tweak the most often in your CSS.
The Box Model
Below is an image of the box model. And yes, it’s very simple.
There are four parts.
content: this is the actual content of the element. It might be text. It might be even more boxes.padding: this is the whitespace between the content and the border.border: this is a solid border marking the edge of the boxmargin: this is the whitespace between the border and whatever is next to us.
You might’ve noticed in our previous examples that the text in our paragraph was pushed against the edge of its element. No more! Now we know that we can change the padding to add some breathing room.
More on Margin
But do you see what I see? The paragraphs already have some nice whitespace between each other.
Why? Because browsers add margin around paragraphs by default. In fact, they do so around most elements. To make sure there is breathing room between elements by default.
This is nice, but it can also be confusing if you don’t know this. If an element isn’t behaving like it should, it’s often because of some default browser style—and margin is a likely culprit.
Check out what happens when you turn it off. (You can even add negative margin …)
A final trick that deserves mentioning is margin: auto;. This value automatically centers your element on the page. It’s extremely useful and how most pages “center” their main text or article on the screen, no matter its size.
More specifics about these properties, especially the border, are explained later in the course. You don’t need to know that now.
Dimensions
As you see, by default, the box will change its size to fit the content. In that sense, the “box” is just a “container”. If you put more text inside that paragraph, it will grow in height to fit all of that inside.
Earlier, I explained how boxes first try to fit horizontally, then flow vertically. This is exactly the same: first it fits the width, then it grows in height.
This is usually what you want.
Width & Height
You can, however, control the width and height more precisely! Use the width and height properties for that.
Min & Max
But we want our websites to be responsive, right? We’d like to stick to the automatic resizing, but just … keep it within certain bounds.
So, instead of setting a fixed dimension, we can set a minimum or maximum. Between these extremes, the box is free to resize responsively, as usual.
Use min-width and min-height for the minimum. As expected, use max-width and max-height for the maximum.
Most of the time, you want to work with these boundaries, not a fixed dimension. It allows responsive boxes, while keeping some guidance to make sure they never look too weird.
Box Sizing
So far, I might have given the impression that the width and height of the box includes everything. You might think the formula for calculating width is:
content + padding + border + margin = width
This is not true.
By default, the width only relates to the content. All the other elements (padding, margin, border) are added on top.
This can lead to annoying situations. You set a width that was perfect … but then you changed the padding later, and suddenly your element doesn’t fit anymore. You need to change the width to account for that extra padding and margin.
In other words, when you say width: 100%, the actual rendered width might be much more than that.
Fortunately, there’s a CSS property to change this behavior. A property that says “when I set a width, I want it to include everything”. This way, if you say width: 100%;, you can be sure it’s exactly that width (including padding and border).
The property is box-sizing and the value you want is border-box.
Check the example below. The second box has the box sizing set and is actually the width supplied. The first box adds the padding and thus secretly became much wider.
This is so useful that it’s now common practice to add this to all elements by default.
How? By using something called the “universal selector”: an asterisk (*). This selects all elements. Any styles you write for this selector are applied to everything.
As such, I recommend making the following line the first thing you add to any CSS design.
But what if the content doesn’t fit?
By messing with the dimensions, it can happen that an element “overflows”. Its content is bigger than you’ve allowed with your CSS.
To deal with this, use the overflow property. It takes the following values.
hidden: just hide anything that goes out of boundsscroll: add scrollbars so the user can reach itvisible: just show it (even if it exceeds the box size)
In the example below, try changing the value and see what happens.
What if I want different values per side?
You might have noticed that the padding, margin and border properties are applied equally to all sides. (Left, right, top and bottom.)
This isn’t always what you want. So yes, you can set it per side by adding the side after the property. For example,
padding-rightpadding-leftpadding-toppadding-bottom
In this course, however, I’ll never do this. For simplicity’s sake, we’ll just use equal padding. (This is also what you need in most cases.)
Similarly, there are “shorthands”. For example, there’s a syntax to set all four sides to different values by supplying four values to the padding property.
This is, again, something you don’t really need to know while learning CSS. It’s needlessly complicated and overwhelming, so I left this out of the course as well.
Even after all those years, I don’t know these shorthands off the top of my head. I grew frustrated about having to look them up all the time, until I entirely stopped using them. They might help some, but they’re not “shorter” for everyone.
I prefer writing out the properties one by one, and I also recommend that to newcomers. We’ll consistently use that approach—no shortcuts, explicitly write what you’re doing—throughout this whole course.
Why do some elements ignore my dimensions?
Broadly speaking, there are two “types” of elements: block and inline.
Block elements demand to be on their own. By default, they take up the full width (such as the paragraphs in the examples), and don’t allow anything next to it.
Inline elements are the opposite. They stay in line with the other elements. They allow other elements next to it and only take up exactly as much space as the content needs.
As such, if you set a width on an inline element—for example—it won’t do anything. It’s an inline element, so it just shrinks to be as small as it can be.
Conversely, even if you make a paragraph only half as wide as the page (width: 50%;), it still won’t allow anything next to it. It demands to be on its own horizontal line.
How do you control these settings? With the display property.
For now, just learn these three possible values.
blockinlineinline-block: a “compromise”. It will stay in line with other elements, but allows configuring dimensions manually.
Crucially, inline elements allow wrapping. That inline element above can be broken in two (start on the current line, end on the next line of text). If you resize your browser window, you can get that to happen.
Block or inline-block elements can never wrap like that.
There are several more values for the display property. It’s perhaps the most powerful one of all! Not surprising, of course, because CSS is all about how to display things. But those values are so powerful that they’ll get their own chapters soon enough.
Want to support me?
Buy one of my projects. You get something nice, I get something nice.
Donate through a popular platform using the link below.
Simply giving feedback or spreading the word is also worth a lot.