css dojo(re)learn CSS, the right way

The Box Model and Layouts

In this kata, we’re going to answer the following questions:(link to the complete list of questions)


Every node of the render tree (even text) is modelized by a box, and it is really important to understand how this box system works to master layout techniques and every little detail about CSS.

A box showing how width, height, padding, border and margin are related to each otherContentmarginpaddingborderheightWidth
Schema of the Box model

Every box has 5 characteristics: a width, a height, a padding, a border and a margin. Inspect those properties in your browser’s dev tools:

The box model in the Firefox dev tools

Those characteristics are different from the width, height, padding, border and margin CSS properties. What you see in the dev tools is what the box actually is, not what we ask it to be.

Let me tell it again, this is really important: for every CSS property there is a difference between the specified value in your CSS code and the value that is actually computed by the browser.

A quick demonstration: the browser might not honor the width property if there is a min-width property. Thus, the width specified property and actual box characteristics will be different.

The box-sizing property

Task: try to set the width and height of the box to 100px

In the above example, something is not really intuitive: if you inspect the box with the dev tools, we end up with a distance from border to border included of 122px. Let’s bring up the box model again:

A box showing how width, height, padding, border and margin are related to each otherContentmarginpaddingborderheightWidth
Schema of the Box model

We get 122px because: 1px from left border + 10px from left padding + 100px from width + 20px from right padding + 1px from right border = 122px. This is not intuitive because most humans will consider a box what is delimited by the borders. But fear not! There is an alternate box model.

The default box model is the content-box model. The other box model is the border-box model. In this model, the width and height characteristics are defined as content + padding + border.

A box showing how width, height, padding, border and margin are related to each otherContentmarginpaddingborderWidthheight
Schema of the border box model

By setting the box-sizing property, you can change the box model used for this box.

Task: change the first box so that it is 100px wide - border to border

As the border-box model is more intuitive, it is a good practice to reset it for all elements:


The box characteristics are computed from the CSS properties depending on the current layout.

There are four main layouts to know: Flow, Table, Flex and Grid. We will see each of them in following katas. After learning all the main layouts, you’ll have a good understanding of which one is the more adapted to your specific case.

A sample of each of the 4 main layouts: flow, table, flex and grid. Flow is the default layout.FlowFlexTableGridThe defaultlayout !
The most common layouts

A layout is a set of rules and CSS properties to dictate how boxes will interact with each other.

Let me list some implications of this definition:

You should see layouts as a toolbox: within the context of a layout, you’ll be able to predict how elements will place next to each other. You don’t like a layout’s ruleset? Change your toolbox and use another layout.

The display property

You can switch between layouts with the display property. This property have two possible syntaxes:

In this kata we’ll learn this property with its full, two values syntax to better understand what happens. This syntax specify the outer display type and the inner display type.

The outer display type
This defines how the element should behave in the context of the parent layout, if the parent layout is Flow. Possible values are block and inline. If the parent layout is not Flow, the outer display type is ignored.
The inner display type
This defines how the element’s children will lay out. Possible values include flow, table, flex, grid and many more...
A box with the text 'inner' inside of it and the text 'outer' outside of itdisplay: ;[outer][inner][outer][inner]
The outer and inner display types

Think of it like this:

For legacy reason we usually use shorthands, for instance:

ShorthandTwo-value syntax
blockblock flow
inlineinline flow
flexblock flex
inline-gridinline grid

Shorthands are not a bad thing and you should continue to use them, however the two value syntax is better for learning purposes.

Task: a developer tried to use the Flex layout but forgot to change the display type! Fix the problem by using the two-value display syntax.

We will see the Flex layout in a further kata, our next goal is learning the Flow layout (the default layout!).

What I should remember

Rate this kata!
I learnt nothing
I learnt a lot