Detailed explanation of inline-block layout implementation of CSS display attribute

CSS display property

Note: If !DOCTYPE is specified, Internet Explorer 8 (and later) supports the property values ​​"inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit". All major browsers support the display property.

Definition and Usage

The display property specifies the type of box an element should generate.

illustrate

This attribute is used to define the type of display frame that the element generates when building a layout. For document types such as HTML, using display can be dangerous if not careful, because it can violate the display hierarchy defined in HTML. With XML, since XML has no such hierarchy built into it, all display is absolutely necessary.

Note: The values ​​compact and marker existed in CSS2, but were removed from CSS2.1 due to lack of widespread support.

1. Explain some common attribute values ​​of display, inline, block, inline-block

inline (inline element): turns the element into an inline element, which has the characteristics of an inline element, that is, it can share a line with other inline elements and will not occupy a line alone. The height and width values ​​of the element cannot be changed, and the size is expanded by the content. Padding can be used to be effective in the top, bottom, left, and right, and only left and right margins can produce margin effects, but top and bottom cannot.block (block-level element): turns the element into a block-level element, occupying a line alone. If its own width is not set, the block-level element will fill the width of the parent element by default. The height and width values ​​of the element can be changed. The various attribute values ​​of padding and margin can be set, and top, left, bottom, and right can all produce margin effects. inline-block (inline-block integration): combines some characteristics of inline and block, combining the first characteristic of inline and the second and third characteristics of block mentioned above. In layman's terms, it is a block-level element that does not occupy a line alone. As shown:

Figure 1:

Figure 2:

From the two figures, we can see that after display: inline-block, block-level elements can be displayed in the same line. Some people say that this is just like floating. Yes, the effect of display: inline-block is almost the same as float, but there are also differences. Next, let’s talk about the comparison between inline-block and float.

2. Inline-block layout vs floating layout

a. Difference: When display: inline-block is set on an element, the element will not be separated from the text flow, while float will make the element separate from the text flow and also have the effect of collapsing the height of the parent element

b. Similarities: can achieve the same effect to some extent

Let's take a look at these two layouts:

Figure 1: display: inline-block

Figure 2: Use float:left for the two children. I mentioned in the previous article about floating layout that this is because the parent element will collapse in height, so we need to close the float and use overflow:hidden for the box. The effect is as follows:

>>At first glance, both can achieve almost the same effect. (Look carefully at the gap problem in display: inline-block, which will be discussed below)

c. The disadvantages of floating layout: unevenness. Let’s take a look at an effect:

Figure 3:

Figure 4:

>>From Figures 3 and 4, we can see that the limitation of floating is that if the elements are to fill a row and be arranged neatly after the line break, the heights of the child elements must be consistent, otherwise the effect shown in Figure 3 will appear, but inline-block will not.

3. Minor problems with inline-block:

a. As you can see above, after using display:inline-block, there is a gap problem with a gap of 4 pixels. This problem is caused by line breaks. When we write a tag, we usually hit a carriage return after the tag end character, and a carriage return will generate a carriage return character, which is equivalent to a blank character. Usually, multiple consecutive blank characters will be merged into one blank character, and the real reason for the "blank gap" is this blank character that we don't pay much attention to.

b. Methods for removing gaps:
1. Add {font-size:0} to the parent element, which sets the font size to 0. Then the blank character also becomes 0px, thus eliminating the gap.

Now this method is compatible with various browsers, but Chrome was not compatible before.

Figure 1:

c. Browser compatibility: IE6/7 is not compatible with display: inline-block, so additional processing is required:
In IE6/7:
For inline elements, use {dislplay:inline-block;} directly
For block-level elements: add {display:inline;zoom:1;}

4. Summary:

display: Inline-block layout and floating layout, which one to use, I think should be decided according to the actual situation:
a. For horizontal arrangement of things, I prefer to use inline-block for layout, because it is clearer and there is no need to clear floats like floating, and worry about layout confusion, etc.
b. For floating layout, it is used when text wrapping is required. After all, this is where floating is really useful. Horizontal arrangement is left to inline-block.