The box model of CSS.

Types of elements.

It is very important to distinguish and understand the behavior of different types of elements. Two types in particular are common and need some explanation: block and inline.

Elements of type block.

Block-type elements include, for example, paragraphs p, all headings from h1 to h6, div elements, etc. They are characterized by:

• They are preceded and followed by a line break.
• By default, they take up the full available width.

Elements of type inline.

Inline elements are, for example, hyperlinks a, input fields input, span tags, etc. It is often surprising, but images img are also inline elements. All these elements share the following characteristics:

• They do not cause a line break, hence their name.
• Their width is defined by their content.

Here is spanelement inline/span inserted into a text.

Differences in property behavior between inline and block.

Several properties apply differently depending on the type of element. This is the case, for example, with height and width, which do not apply to inline elements. Here is a summary of some essential properties.

(1) Margins apply in the horizontal direction only.

(2) The padding property (inner margins) applies but does not push other elements away.

Here is a block element that contains a span element. The latter has been colored blue.
Each of the two elements received the same properties. We can see that width and height have no effect on the inline element, that margins only apply in the line direction, and that padding does not push other elements away.

Other types of elements.

Other types of elements exist but are more specialized: they generally have a specific role and only concern a few HTML tags. For example, table, table-row, list-item, etc. Due to their specificity, it is not necessary to go into detail about their behavior in this introduction.

CSS3 introduced new types of elements that are very interesting: flex, grid, inline-block, etc. A special chapter is dedicated to them later in this tutorial.

Note that all elements have a default type, but the CSS property display can change the type of any element.

The box-model of CSS2.

This term, which can be found in all CSS tutorials, is not always explained. In fact, it simply refers to defining how the dimensions of elements are calculated, how margins are positioned, etc. The little diagram below is clearer than all the explanations.

• First, we find the margins, outside the border.
• Next comes the border, whose thickness should not be overlooked even if it's only 1 pixel.
• Inside the border and around the content are the inner margins (padding)..
• Finally, the actual content: text, an image, or any other element.

So what exactly do we call the width or height of an element? Do the dimensions of the element include margins, borders, etc.? The answer might be surprising: by default, the dimensions of an element are the dimensions of its content. For your information, the dimensions are defined by the width property for width and the height property for height.

It's not very intuitive: we expected the element's dimensions to be calculated relative to its border. But a property allows you to change this behavior: box-sizing . If desired, we can decide that the element's dimensions are defined relative to its border.

box-sizing:content-box
(default value)

box-sizing:border-box

Horizontal centering.

Centering is an important operation in formatting. CSS distinguishes several types of centering: centering blocks within their parent element, and centering the content of a block.

Centering a block within its parent element (often the page) is done by applying the auto value to the left and right margins. The block's content, on the other hand, can be centered using the text-align property.

Vertical centering.

It's much less easy. CSS2 doesn't really provide a universal solution to vertically align elements relative to each other, or to vertically align them within their parent. To simplify, let's say that vertical centering only works well in table cells, or to adjust the position of an inline element on its line. Vertical centering is handled by the CSS property vertical-align .

Fortunately, CSS3 provides effective solutions to address this problem.

The contributions of CSS3.

The new layout tools introduced by CSS3 greatly facilitate complex and/or responsive layouts (which adapt to different devices such as computers, tablets, and phones). These new tools include grids, flex-boxes, and, more simply, multi-column layouts.

The implementation is the same in all cases: define the type of a container element with the display property. The child elements then position themselves according to the nature of the parent. For example, if the parent container is defined as a grid, the elements are arranged in a table.

Let's take an example. The HTML code below is typically rendered as seen in the example: the inner elements are all of the block type, so they are arranged one below the other, filling the width of the parent.

Now, let's define the parent element (the container) as a grid. This requires just a tiny bit of CSS (actually, a bit more would be needed to also define the grid columns, but that would make this tutorial less clear). In any case, declaring the container as a grid causes the child elements of the container to be arranged in a table-like layout.

CSS provides all the necessary properties to arrange the cells in the container, or to arrange the elements within their cell. This is what we are going to look at now.

Specific arrangements for each of the containers.

In summary, these new containers provide a series of slots (or cells) in which child elements can be placed. These cells are arranged according to the type of container: in a grid, side by side, etc.

In addition to positioning its child elements, each of these containers provides specific functionalities. The flex-box, for example, can distribute its child elements across lines based on their size, and can work horizontally or vertically. This is then referred to as the main axis and the cross axis, which are defined by the flex-direction property. The multi-column container automatically distributes text into one or more columns. Moreover, it allows for easily drawing a dividing line between the columns. And there are many other features as well.

Cell positioning (the ...-content properties).

Two properties handle the positioning of cells within the container. These are justify-content for horizontal positioning (or along the main axis in a flex-box), and align-content for vertical positioning, or along the cross axis.

For the sake of clarity, we will limit the following examples to grid containers.

Horizontal axis positioning is ensured by the justify-content property. Vertical axis positioning is handled by align-content. In general, properties whose names start with justify position along the horizontal or main axis, while those whose names start with align position along the vertical or secondary axis. These properties apply to the container.

Common values for these properties are start, end, or center, the first two values being contextual, meaning they adapt to the writing direction. Other values distribute the cells across the available space: stretch, space-around, etc.

Positioning elements in cells (...-items properties).

Not only can the cells be positioned within the container, but the elements themselves can be positioned within their cell. This is the role of the properties whose names end with items. These properties are applied to the container, so they affect all child elements.

Positioning a specific element (properties ...-self).

The justify-self and align-self properties allow you to position an element differently from the others. These two properties apply to the child element that needs to be positioned, not to the container.

To go further.

This brief tutorial has hardly covered all the possibilities of flexbox, grid, or other containers. We have limited ourselves to presenting the common principles of these containers. You can now check out:

• A tutorial on grids.
• A tutorial on flex-box.
• The positioning properties of cells: justify-content , align-content.
• The positioning properties of elements within their cell: justify-items , align-items.
• The positioning properties of a particular element: justify-self , align-self.