The features of block, inline, inline block elements in HTML

Element Classification and characteristics:

1. Block-level elements:

In HTML <div>, <p>,

(1), each block-level element starts from the new row, and the subsequent element is also a row; ( a block-level element that has a single row )

(2), the height of the element, width, row height, and the top and bottom margin can be set ;

(3), the element width is not set, is its own parent container of 100% (and the width of the parent element consistent), unless a width is set.

2. Inline Elements :

In HTML,<span>, <a>, <label>, <input>, , <strong>, and <em> is the typical inline element (inline Element) element. Of course, block elements can also be set to inline elements through code display:inline. Inline element Features:

(1), and other elements are on one line;

(2), the height of the element, width, row height and the top and bottom margin is not set;

(3), the width of the element is the width of the text or Picture it contains, cannot be changed.

Note: Setting a width and height for a element, but none of it, is because a is an inline element at the default, and inline elements are not set and high.

3. Inline block elements:

Inline block elements (Inline-block) are features that have inline elements, block elements, and code display:inline-block that are set to inline block elements. Inline-block Elemental Features:

(1), and other elements are on one line;

(2), element height, width, row height, and top and bottom margin can be set.

Note : IMG is an inline element, but he is also a replacement element, and he has a special performance:

1. Width/height can be set;

2. By default, the IMG element occupies a space on the screen consistent with the actual pixels of the picture, unless the CSS is set or its own width/height HTML attributes are set;

3. If the package element of the IMG tag is also an inline element, then the boundary of the IMG can go beyond the boundaries of its immediate parent element until its width, height reaches the maximum or set value, and the sibling element of IMG in the document stream does not cover img. The most common is the ; contained within <a>

4. So from the behavioral perspective, the IMG element, as a replacement element, has a behavior similar to Inline-block, although in spec he is indeed an inline element.

The features of block, inline, inline block elements in HTML