What does inline-block mean in css?

In CSS, inline-block refers to "inline block element", which has the characteristics of both inline elements and block elements; inline-block elements can be on the same line as other elements. The element's height, width, line height, and top and bottom margins can all be set.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

block

Features of block-level elements:

1. Each block-level element starts on a new line, and subsequent elements also start on a new line. Start a line. (Really overbearing, a block-level element occupies one row)

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

3. If the width of an element is not set, it is 100% of its parent container (the same as the width of the parent element), unless a width is set.

,

,

,

,

and
• are examples of block elements.

inline

Characteristics of inline elements:

1. On the same line as other elements;

2. Element The height, width, and top and bottom margins cannot be set;

3. The width of an element is the width of the text or image it contains and cannot be changed.

, , , , , and are examples of inline elements.

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.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of What does inline-block mean in css?. For more information, please follow other related articles on the PHP Chinese website!