css: block, inline and inline-block usage and differences

Overall concept

1. The two concepts of block and inline are shorthand terms. To be completely precise, they should be block-level elements (block-level elements) and inline elements (inline elements). element). 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.

2. Generally speaking, HTML elements have their own layout levels (block elements or inline elements):

• Common blocks Level elements include DIV, 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.

The block element can contain block elements and inline elements; but the inline element 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, you can change the layout level of elements through the settings of display:inline and display:block.

Comparison of block, inline and inlinke-block details

Supplementary instructions

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

• IE (lower version of IE) does not originally support inline-block, so if you use display:inline-block for inline elements in IE, theoretically IE will not recognize it. However, using display:inline-block will trigger layout under IE, so that the inline element has the appearance of display:inline-block attribute.

• display:inline-block

• ##display:inline

• display:block

1. Simply put, the object is presented as an inline object, but the content of the object is used as a block Object rendering. Subsequent inline objects will be arranged on the same line. For example, we can give a link (a element) an inline-block attribute value so that it has both the width and height characteristics of block and the peer characteristics of inline.

2. 
   

3. Inline elements will not occupy a row. Multiple adjacent inline elements will be arranged in the same row until a row If it cannot be arranged, a new line will be added, and its width will change with the content of the element.

4. The width and height attributes set for inline elements are invalid.

5. The margin and padding attributes of the inline element, the horizontal padding-left, padding-right, margin-left, and margin-right all produce margin effects; but the vertical padding -top, padding-bottom, margin-top, margin-bottom will not produce margin effects.

1. 
   

##The block element will occupy its own line, and multiple block elements will each start a new line. By default, the width of a block element automatically fills the width of its parent element.
The block element can set the width and height attributes. Even if the width of a block-level element is set, it still occupies an exclusive line.
The block element can set margin and padding attributes.

1. 
   

##

The above is the detailed content of css: block, inline and inline-block usage and differences. For more information, please follow other related articles on the PHP Chinese website!