Illustrated CSS: CSS Box Model

Before learning about web layout , there is a very important concept to understand, which is the box model. The CSS box model is a collection of different CSS rules that define how to render web pages. This series of different attributes determines the position of HTML elements on the page. So far, all web pages are just elements rendered one after another. It can be said that the box model is a toolkit for customizing the default layout scheme.

As a web developer, most of the work is to apply the rules in the CSS box model to transform the design model into a web page (in simple terms, UI restoration). The CSS box model to be introduced next is considered the most important part of UI restoration because it defines the individual behavior of the box. Especially in the following chapters, we will learn various layouts around the structure of HTML and the CSS box model.

Introduction to Basic Box Model

In CSS, everything generates a box. The essence of a web page is a set of blocks and internal connection boxes. If you use developer tools to view elements in HTML in a browser, you can understand these boxes well. These boxes are a collection of CSS rules mainly used to determine the size of each element on the page.

In the world of CSS, each element in HTML is compared to a box (also known as an element box) .

This box describes the space that an element occupies in a Web layout . Therefore, the position and size of elements will affect each other. As a CSSer, it is necessary to have a clear understanding of some theories and concepts if you want to thoroughly understand how these attribute rules affect each other.

Block elements and internal connection elements

Any web page will have many different HTML elements, which is well known. As we mentioned earlier, any HTML element is a box, and these boxes are mainly of two types, blocks and internal connection boxes. Correspondingly, they are block elements and internal connection elements in HTML.

• Block box : If no processing is done, its width will occupy the entire width (or height) of the container, and the height (or width) is determined by the content of the element, such as div , p , li and other elements are block elements, and the box rendered by these block elements on the Web is a block box
• Internal connection box : If no processing is done, its width and width are determined by the content, such as span , strong , em and other elements are internal connection elements, and the boxes rendered on the Web are internal connection boxes

Using a picture to describe may be easier to understand.

This is just a common understanding.

Today, CSS has also undergone significant changes, and rendering has also undergone corresponding changes. There is a close connection between the block box and the internal connection box and the writing-mode .

For block elements (block boxes), if the writing mode is horizontal -tb , then the block flows from top to bottom; while when the writing mode is vertical horizontal-lr , then the block flows from left to right. As shown in the figure below:

For internal connection elements, they are laid out according to the current context, writing mode, and orientation. Their width depends on their content and they are placed adjacent to each other wherever there is space. As shown in the figure below:

In short, block elements follow the flow direction and internal connection elements follow the write direction :

Block shaft and internal connection shaft

Block elements and internal connection elements are the two most basic types of frame patterns in CSS. In the world of the Web, there is also the concept of coordinate axes. The coordinates of the Web mainly have two axes, namely:

• X -axis : the coordinate axis in the horizontal direction
• Y -axis : the coordinate axis in the vertical direction

The content on the page is formatted according to these two axes. One axis is the internal connection axis, which is the axis of each line of text. By default, on web pages, if no writing mode is specified, the internal connection axis is horizontal, from left to right (writing mode will have a certain impact on it). The other axis is the block axis, which is stacked along this axis. Similarly, by default, this axis is vertical, from top to bottom. As shown in the figure below:

• Internal connection axis (Inline Axis) : Take an English website as an example. The reading direction is from left to right. Just like multiple internal connection elements, they are arranged in order from left to right, and also similar to using display: inline in block elements. Each item appears on the same line
• Block Axis (Block Axis) : As we all know, for block elements without any operation, their arrangement order is stacked from top to bottom. For example, the internal connection element uses display: block

Actually, these two concepts are quite difficult to understand. Take the main axis and side axis in the Flexbox layout for example:

By default in writing mode, the internal connection axis is like the main axis on the Flexbox, while the block axis is like the side axis on the Flexbox. In fact, these two concepts are easier to understand if we apply them to grid layout. Because in grid layout, blocks and internal connection axes are always used.

The block axis corresponds to the order in which blocks are laid out on the page. For example, the text content on the page, each paragraph is arranged below another paragraph, and the direction of these arrangements is the dimension of the block, so in grid layout, this is a block (Block Axis). In CSS grid layout, the block axis is also called the row axis, which is why the block axis properties are grid-row-start and grid-row-end .

Therefore, the internal connection axis will pass through the block axis and be distributed in the direction of the encountered word in the sentence. In English sentences, this axis runs from left to right. In grid layout, the internal connection axis properties are grid-column-start and grid-column-end .

As mentioned earlier, the internal connection axis and block axis are closely related to the writing mode. When the writing mode is different, the internal connection axis and block axis will change accordingly. As shown in the figure below:

Type of box mode

Although each element in CSS is a box, the pattern of this box is different. Common patterns include:

• Block-level box : A box generated by elements such as p and div in HTML. In normal flow mode, block-level boxes "wrap" before and after the box, so block-level boxes are stacked vertically
• Inline box : A box generated by elements such as strong and span in HTML. Inline boxes do not "wrap" before or after.
• Inline block-level box : The internal features are like block-level boxes, and the external features are like inline boxes. The behavior of inline block-level boxes is similar to that of replacement elements, but not exactly the same. For example, insert a line of text into a div element like an inline image

There are several concepts that need to be understood in understanding the box pattern.

• Regular flow : refers to the left-to-right and top-to-bottom order when rendering Western languages, as well as the text layout used in traditional HTML documents (this is also commonly known as document flow). For non-Western languages, the direction of flow may change. Most elements use regular flow, unless the element floats, positions, and is placed in the Flexbox container or Grid container.
• Non-permutated elements : elements whose content is contained in the document, for example, the p element is a non-permutated element because the text content in p is in the element itself
• Permutation element : an element that occupies space for other content. For example, the img element is a typical permutation element, and most form elements are also permutation elements

Understanding these concepts is very helpful for in-depth learning of CSS or discussing layout-related knowledge later.

Actually, any element in HTML has its corresponding box mode, but in CSS, we can use the display attribute to modify the box mode of the element. For example, when you use display: flex or display: grid on a div , the box mode of the div is the same as display: block , but it changes to the box mode of their child elements. Of course, if you use display: inline on a block-level box element, the element will become an inline box.

The display property in CSS is also one of the important properties of CSS, and it is also an important part. We will spend a separate chapter later to discuss the use of this aspect with you.

Box model terminology

Since the element is a box, the size of the box can be determined by CSS properties ( physical properties ). The box size is mainly determined by four properties:

• Content : Text, images, or other media content in an element
• Padding : the space between the box content grid borders
• Border : the border of the box
• Margin : the distance between boxes and other boxes

If we use a picture to describe it, it can be something like this:

The above mentioned attributes are all that the browser needs to render the element box. The content is what you write in HTML, and the rest is purely presentational, mainly determined by CSS rules. Moreover, for CSSers, they like to use a box model similar to the following figure to illustrate the element:

And in the browser debugger “ Computed “ you can see how it interprets the box model of an element:

Take a simple example to demonstrate:

.box {
    width: 200px;
    height: 200px;
    background-color: darkviolet;
    border: 5px solid hotpink;
    padding: 25px;
    margin: 20px;
}

The .box corresponding box is shown in the following figure:

Changes brought by CSS logical properties to the box model

Have you noticed that the padding , border and margin mentioned earlier are all physical properties used to describe a box, and when developers discuss the box model, they are accustomed to using the following figure to illustrate it:

Whether in the past or now, there is no mistake in explaining the concept of CSS box model with the above figure. The difference is that we still focus on the special characteristics in the above figure, but with the emergence of CSS logical properties. When explaining the CSS box model again, the physical properties * -top , * -right , * -bottom and * -left should be used instead of * -inline-start , * -inline-end , * -block-start and * -block-end to redefine the box model, similar to the following figure:

In this way, according to different languages, the internal connection axis and block axis of margin , border and padding in the box model are also different. Take the English website as an example:

margin

• margin-block-start = margin-top
• margin-block-end = margin-bottom
• margin-inline-start = margin-left
• margin-inline-end = margin-right

padding

• padding-block-start = padding-top
• padding-block-end = padding-bottom
• padding-inline-start = padding-left
• padding-inline-end = padding-right

border

• border-block-start = border-top
• border-block-end = border-bottom
• border-inline-start = border-left
• border-inline-end = border-right

That is to say, if we introduce CSS logical properties and describe a box model in the future, we should use the following figure to illustrate it more accurately.

Box size

Each box has its own size. In physical properties, the size of a box is described by width and height . In logical properties, the logical size properties inline-size and block-size are used to describe the size of a box.

If you understand the concepts of internal connection and block axis, it is easier to understand logical size. For example, in English websites, inline-size replaces width , and block-size replaces height . That is to say:

• Block-size : Defines the horizontal or vertical size of an element block, depending on its writing mode. If the writing mode is vertical, the block-size is related to the width of the element, otherwise, it is related to the height of the element
• Inline-size : Defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the width or height attribute, depending on the value of writing-mode . If the writing mode is vertically oriented, inline-size is related to the element's height ; otherwise, it is related to the element's width

For example, English or Arabic websites:

• width = inline-size
• height = block-size

And on the Japanese website:

• height = inline-size
• width = block-size

In our understanding, in addition to width and height , there are also min-width , max-width , min-height and max-height . So in the inline-size and block-size also exist, and the corresponding is to add min or max in front of it. For example: min-inline-size: 100px or max-block-size: 100px .

Box model switching

As mentioned above, CSS width and height (or logical properties inline-size and block-size ) can be used to calculate the size of the element box. To help everyone better understand, here we still use physical properties to explain.

In general, the width of the box is the sum of the width of the element's content, padding, and border, which is often referred to as the width of the inner box. If you add the size of the padding to the width of the inner box, you can calculate the width of the outer box.

Box height is calculated similarly to width .

However, in the layout, the width calculation of the box will directly affect the layout, and even directly break the layout of the page. For example, a div element:

div {
    width: 100%;
    padding: 1rem;
}

It will make the div exceed the container, similar to the following figure:

When facing such a scenario, we need to use the CSS box-sizing property, which can better help us control the size of the box:

Using an example to explain, it will be easier to understand.

Summary

As we delve deeper into building complex web pages, we will learn more about the practical application of the CSS box model. Now, think of it as a “tool” in CSS that can better transform design models into real-world web pages. If you don’t know how to better use the CSS box model in web layout, it’s not important and you don’t need to worry too much. In this chapter, just remember:

• Any element in a web page is a box
• Boxes in CSS can be internal connections or block-level
• Any box in CSS contains content, padding, borders, and padding

In addition, the logical properties of CSS will bring significant changes to the CSS box model. The use of logical properties can better combine with the writing mode and better conform to the visual perception. But it also brings some new concepts. However, in the following practice, it will not involve too much about the logical properties in the box model.