Schrödinger paradox: CSS Box Model version

Written by Inés P.pino and Ester Legaz

Imagine a cat inside a box with a poison device that has 50% chances of releasing it. Imagine that box inside another box. Imagine all the people inside those boxes. That is HTML: boxes. Whatever you want to put inside, is your choice (as it is to kill or not kill the cat). All HTML elements can be considered as boxes, whose values can be modified in size, color or border. We have the possibility of adding other properties as shadows or we can even contain some boxes inside others. The most common way to structure the contents inside HTML boxes is through divs. A div is a tag that allows us to group contents and define styles. We can add as many elements as we want inside one div, as if it was a Matryoshka doll, encapsulating one element inside the other: <p>, <img>, <h1>, another <div>…

There are five basic properties to shape boxes:

• Width: some elements have a certain width by default. They can occupy all the space they need or all the remaining space. However, we can force a minimum or maximum width through CSS to adapt it to the determined design.
• Height: unlike width, it is automatically modified depending on the content of the box. We also have the possibility to determine the height of the box through CSS though.
• Padding: this is the invisible space that distances the content from the container (the border). This is what we would call “margin” in Word documents.
• Border: this is the property that defines the limits of the box. It’s not going to be visible by default, but we can add some values to make it visible (dashed, dotted, different colors, grosores and border radius).
• Margin: lastly, this property allows you to distance one box from another one. It’s the only property external to the actual box.

As we have mentioned before, these properties can be modified and we can use different measurement units.

• Pixels: everybody knows pixels, but we share a definition just in case: it’s the basic unit of programmable color on a computer display.
• Percentages (%).
• Rem: this depends on the size of the chosen font-family — 16px by default -. You can use several tools to make it easier to compute like this calculator.
• Em: it depends on the last font-size that’s been defined.

There are two box models that are defined through the property box-sizing.

• Content-box: it’s the default model. Borders and padding are added to the box content, so the result would be totalWidth = width + padding + border.
• Border-box: border and padding are drawn inside the box, so the available space for the content is reduced.

The following boxes have the same width, padding and border. One looks bigger (content-box) because it adds the size of the properties and the other one (border-box) keeps its defined width.

No matter which type of model you choose to use, you will end up with your website full of boxes. Because of this, the layout of all the elements of our page will be related with the flow of the boxes. It makes perfect sense to use a system of columns and/or rows in order to place those boxes wherever you want in your screen. There are some systems as the Grid system, used by Google, and Bootstrap, widely used in the front-end world mostly for prototypes, that allows to take advantage of the box models and display each one in an easy and quick way. For the good fortune of our box’s content -the cat, the people- well that, that is another story.