Thinking Inside The Box ‒ CSS Box Model

JavaScript Teacher
Mar 16, 2018 · 3 min read

To get a good idea of how flex works try flex layout editor on this page.

It’s tempting to start tweaking HTML element’s CSS properties before getting a good grasp on the . Besides, you have already seen it in Chrome developer’s console. It looks something like this:

Image for post
Image for post
The basic representation of CSS box model. Looks simple enough!

The in the is the content area.

By default , and are set to . This makes the HTML element with default CSS style of a border and dimensions of look like this:

Image for post
Image for post
An HTML element with default CSS box model style (box-sizing) set to its default value of content-box.

Things start to get interesting when padding is added ‒ in this case

Image for post
Image for post
Padding added to a regular HTML element with default style pushes out its dimensions in the amount of padding thickness that was set.

The padding thickness now surrounds the element. Notice that the element’s physical dimensions are now ecause () padding was added to each side.

This isn’t always a problem at all ‒ in fact is what you will see implemented on most web sites ‒ because assuming default values is generally a good thing.

However, sometimes this makes it difficult to predict the final dimensions of the element. Wouldn’t it be better if we could contain padding the defined dimensions of the element instead? That’s another possibility!

It is achieved by overriding with a value of .

Image for post
Image for post
Overwriting box-sizing default value with padding-box will “invert” padding, moving it to the inner box of the element.

The padding was “inverted” and This way the original dimensions of are preserved.

Now that padding is on the inside of our box area it is by pixels on each side.

It’s a nice model for creating User Interface elements!

But remember that there is also border. Fortunately for us, we can push the border inside of an element in the same way by using value.

But first, let’s take a look at an element with padding and border:

Image for post
Image for post
By using box-sizing: content-box we can successfully move the border of an element inside.

Using border-box it is possible to push border padding inside the box:

Image for post
Image for post
CSS: box-sizing: border-box in action

That’s nice.

Now padding and border are on the inside, too. But what about ? It would be good if we could use “margin-box” and stuff all 3 parameters inside the content area.

So even though in your deepest hacker desires you may want to wish for one… it wouldn’t make much sense to implement it and keep good conscience.

Image for post
Image for post
There is no margin-box. Sorry.

There is no margin-box. Sorry but not sorry. The reason is obvious.

More stuff like this in my book.

Limited Time Offer

Image for post
Image for post
CSS Visual Dictionary 28% OFF for Medium readers.

28% OFF

Medium Readers Only:

CSS Visual Dictionary

Contains all CSS properties.

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

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