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 the element, its padding, border and margins.

This relationship is most easily understood from the following visualization:

Element dimensions¶

HTML elements, if they are block elements, can be dimensioned using the height and width properties.

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

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

Padding¶

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

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

The padding can take different values on each side of the element: left, top, right and bottom. These distances are determined by means of separate properties, e.g:

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

As in the case of e.g. border, it is also possible to write down a shortened version, having four (respectively meaning top, right, left and bottom padding) or two (the first meaning top and bottom padding, the second meaning right and left padding) values, e.g:

.box-model-demo {
    padding: 10px 20px 30px 40px; /* The values are then written clockwise: top, right, bottom, left. */
}

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

Border¶

The border property, to which we can assign thickness, line type (dotted, continuous, dotted, etc.) and colour is responsible for the border. When giving a value, you must keep the following order: thickness, type, color, e.g:

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

Margin¶

The Margin is the distance between the edge of the element and the adjacent element. We define it similarly to a padding, using the margin property, e.g:

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

The margin, as well as the padding, can be defined for each side with the property The following values can be used: margin-right, margin-top, margin-left and margin-bottom or using abridged notations with 4 or 2 values.

box-sizing property¶

Consider an HTML element that has the following class:

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

This element on the page will take the width calculated from the formula:

width = width property + padding + border

In the above example, the width will be 242px. Although we have declared the width property with a value of 200px, in reality our element will take much more space.

We can change this behavior with the box-sizing property, which takes the value of content-box by default. However, it is standard to use the border-box value, which means that the given width in the width property also includes the fill and border. This way our element will occupy exactly 200px on the page.

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

* {
    box-sizing: border-box;
}