Box model¶

All HTML elements are displayed as rectangles and use the so-called box model. This model determines the relationship between the content of an element, its fill, frame, and margins.

This relationship is best understood from the following visualization:

Item dimensions¶

HTML elements, if they are block elements, can be given dimensions using the properties height andwidth, e.g .:

<div class="box-model-demo">
  This is SDA's box model demo
</div>

.box-model-demo {
    width: 200px;
    height: 200px;
}

Filling¶

By default, the text from the previous example is adjacent to the edge of the element, namely the upper-left corner. For an element, we can define a fill, i.e. the distance of the text from the edge of the element. We do this with the padding property which adds padding to each side of the element, e.g .:

.box-model-demo {
    padding: 20px; /* adding 20px padding on each side */
}

The padding can have different values on each side of the element: left, top, right, and bottom. We define these distances using separate properties, e.g.:

.box-model-demo {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

As in the case of, for example, borders, it is also possible to shorten it, having four (meaning top, right, left and bottom fill, respectively) or two (the first means top and bottom fill) the bottom, the second - right and left) values, e.g.:

.box-model-demo {
    padding: 10px 20px 30px 40px; /* We write the values clockwise: top, right, bottom, left. */
}

.box-model-demo {
    padding: 1rem 2rem;
}

Border¶

The border is responsible for the border property, which can be assigned thickness, line type (dashed, continuous, dotted, etc.) and color. When entering a value, the following order must be followed: thickness, type, color, e.g.:

.box-model-demo {
    border: 1px solid black;
}

Margin¶

The margin is the distance between the edge of an element and its adjacent element. We define it similarly to the fill, using the margin property, e.g .:

.box-model-demo {
    margin: 20px; /* adding a 20px margin on each side */
}

Margin, like padding, can be defined for each side with the properties margin-right, margin-top, margin-left, and margin-bottom, or by using truncated entries with 4 or 2 values.

Property box-sizing¶

Consider an HTML element that has the following class:

.box-model-demo {
    width: 200px;
    height: 200px;
    padding: 20px; /* adding 20px padding on each side */
    margin: 20px; /* adding a 20px margin on each side */
    border: 1px solid black;
}

This element on the page will take the width calculated on the basis of the formula:

width = properties width + filling + frame

In the example above, the width would be 242px. Even though we declared the width property to be 200px, our element will actually take up much more space.

This behavior can be changed with the box-sizing property, which defaults to content-box. However, it is standard practice to use the border-box value, which means that the given width in thewidth property also includes the fill and the border. Thanks to this, our element will be exactly 200px on the page.

It is common practice to set the box-sizing property using the selector of any item with *, e.g.:

* {
    box-sizing: border-box;
}