HTML knowledge you must know

Block-level elements and inline elements

By default, block-level elements will always occupy one line, but inline elements will not. Except for the special display attribute of the table element, the display attribute value of basically all HTML elements is either block or inline. No matter which HTML element you want to know about, the first question to ask is: is it a block-level element or an inline element? Then when writing the markup, anticipate how the element will be positioned in the initial state, so that you can think more about it. How to use CSS to reposition it in the future, because there is a big difference in positioning between block-level elements and inline elements, which will be explained in detail later.

The block-level element box (a very important concept - the box model) will expand to the same width as the parent element, which is why the block-level element will occupy The reason for one line is that the parent element of all block-level elements is body, and its default width is the browser's viewport size, so by default the width of block-level elements is also as wide as the browser's viewport, so Since then, there is no space next to one block-level element to accommodate another block-level element.

Compared with block-level elements that will expand to the same width as their parent elements, inline elements behave exactly the opposite. They will shrink-wrap their content as much as possible. This That's why several inline elements will be displayed side by side on one line until they fill up a new line, and each block-level element will directly start a new line.

The following table lists some common block-level elements and inline elements:

As mentioned before, no matter which HTML element you want to know about, the first The first question to ask is: is it a block-level element or an inline element, because their performance on the box model is very different, but before understanding their differences, we must first know another concept - replacement Elements and non-replacement elements, where replacement elements refer to elements that the browser determines the specific content to be displayed based on the attributes of the element, such as the img tag. The browser reads the content contained in this element based on its src attribute value. , common replacement elements include input, textarea, select, object, iframe and video, etc. These elements have a common feature, that is, the browser does not directly display its content, but through the value of one of its attributes. To display specific content, for example, the browser will determine whether it should display radio buttons, multi-select buttons or text input boxes based on the attribute value of type in input. For non-replaced elements, such as p, label elements, etc., the browser directly displays the content contained in the element. At this point you should have a rough idea of ​​what replacement elements and non-replacement elements are.

After you have a general understanding of the two concepts, you can understand the difference in performance between block and inline on the box model. The first is margin, which W3C The supported element objects are defined as follows:

Applies to: all elements except elements with table display types other than table-caption, table and inline-table

My understanding is that all elements support all table display types such as table-row-group, table-cell, table-row and table-header-group, etc., but in order to verify my understanding, I found that elements with a display attribute value of table are also supported. Maybe my understanding of the original standard is wrong. But there is another thing to pay special attention to. The two attributes of margin-top and margin-bottom are relatively special. They have no effect on non-replaced inline elements. The following is an introduction to the supported objects of margin-top and margin-bottom from W3C:

Applies to: all elements except elements with table display types other than table-caption, table and inline-table
These properties have no effect on non-replaced inline elements.

The previous sentence is the same as the previous description of margin. There is no doubt that the following sentence means that these (margin-top and margin-bottom) attributes have no effect on non-replaced inline elements such as a and span. Note that this is a non-replaced inline element and not just a non-replaced element or an inline element. For example, img is an inline element, margin-top and margin-bottom have an effect on it, because it is a replacement element rather than a non-replacement element, so "margin-top and margin-bottom have no effect on inline elements" This statement is incorrect.

As for padding support objects, W3C describes it like this:

##all elements except table-row- group, table-header-group, table-footer-group, table-row, table-column-group and table-column

The above sentence means except Elements with table display types table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column are not supported, but all other elements are supported.

But there are some special cases here that need to be noted. The effect of setting left and right padding on inline elements such as span and img is visible, but setting top and bottom padding on inline elements Margins are invisible in some cases. These situations are divided into whether it is a replaced element and whether a background color is set. In order to understand these concepts more intuitively, I made a table here:

So the statement that "padding-top and padding-bottom have no effect on inline elements" is also wrong, because they are only invisible for inline non-replacement elements that do not have a background color. , and for inline replacement elements, it will have an effect regardless of whether the background color is set, and the parent element will be stretched.

Having said so many differences between block and inline, in fact, in addition to these two common display attributes, there is another attribute that is also very common, that is inline-block. That's right, this is a combination of the previous two situations. It has both the characteristics of block and inline. For example, after setting the attribute value of an element whose display attribute value is block or inline to inline-block, you can use just Text-align: center; is effective for inline elements. In addition to centering it, you can also use padding-top and padding-bottom to set the top and bottom padding for the element without setting a background color, and to expand the parent element. .

For more articles related to HTML knowledge that you have to know, please pay attention to the PHP Chinese website!