inline-block

Inline block elements (inline-block) have the characteristics of both inline elements and block elements.

inline-block element features:

1. It is on the same line as other elements;

2. The height, width, line height and top and bottom margins of the element All can be set.

Note:

Not all browsers support this attribute. Currently supported browsers are: Opera and Safari. Use display for inline elements in IE: Inline-block is not recognized by IE, but using display:inline-block will trigger layout under IE, so that the inline element has the display:inline-block attribute. From the above analysis, it is not difficult to understand why under IE, setting the display:inline-block attribute on a block element cannot achieve the effect of inline-block. At this time, the layout of the block element is only triggered by display:inline-block, and it is originally a row layout. Therefore, after triggering, the block element is still in row layout, and will not be rendered as an inline object like the block element in Opera.

IEHow to achieve the effect of display:inline-block with the lower block element?

There are two methods:
1. First use the display:inline-block attribute to trigger the block element, and then define display:inline to render the block element as an inline object (two displays It must be placed in two css statements one after another to have an effect. This is a classic bug of IE. If display:inline-block is defined first, and then the display is set back to inline or block, the layout will not disappear). The code is as follows (...are other attributes omitted):

div {display:inline-block;...} 
div {display:inline;}

2. Directly set the block element to be rendered as an inline object (set the attribute display:inline), and then trigger the layout of the block element (such as: zoom:1, etc.). The code is as follows:

div {display:inline; zoom:1;}

Overall concept

The two concepts of block and inline are shorthand. To be precise, they should be block-level elements. ) and inline elements (inline elements). The block element is usually realized as an independent block and will be changed to a separate line; the inline element will not cause line breaks before and after, and a series of inline elements will be displayed in one line until the line is full.

Generally speaking, html elements have their own layout levels (block elements or inline elements):

Common block-level elements include p, FORM, TABLE, P, PRE, H1~ H6, DL, OL, UL, etc.
Common inline elements include SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR, etc.

Block elements can contain block elements and inline elements; but inline elements can only contain inline elements. It should be noted that this is a general statement, and the elements that each specific element can contain are also specific, so this rule does not apply to individual elements. For example, the P element can only contain inline elements, but not block elements.

Generally speaking, we will use display:block, display:inline or display:inline-block to adjust the layout level of elements. In fact, the parameters of display are far more than these three, they are just more commonly used.