Understanding of HTML inline elements and block elements

1 Definition of elements and block-level elements in rows

Any HTML (Hypertext Markup Language) element has its default display property, most of which are inline elements (inline) or block-level elements (block). An inline element occupies only the space contained in the bounding rectangle of its corresponding label, and a block-level element occupies the entire space of its parent element (container), thus creating a "block".

2 differences between elements in rows and block-level elementscontent

In general, inline elements can only contain data and other inline elements. Block-level elements can contain inline elements and other block-level elements. This structure contains inheritance differences that enable block-level elements to create more "large" structures than inline elements.

format

By default, inline elements do not start with a new line, and block-level elements begin a new row.

Common Elements

Inline elements:<b>, <span>, <i><small>, <big>, , <button>, <input>, < Lable>, <select>, <textarea>, etc.

Block-level elements:

usage

1. In general, the inline element sets the width and Height properties to be invalid, and block-level elements can set the width and Height properties. (Note that the block-level element is still exclusive after setting the Width property attribute)

2, block-level elements can be set margin and padding. The padding-left,padding-right,margin-left,margin-right of the horizontal direction of the element in the row produces a margin effect, but the vertical direction of the Padding-top,padding-bottom, Margin-top,margin-bottom does not produce a margin effect. (The horizontal direction is valid, the vertical direction is invalid)

3 Transformation of elements and block-level elements in rows

Display:none; Do not display this element

Display:block; Can convert inline elements to block-level elements

Display:inline; Block-level elements can be converted to inline elements

Display:inline-block; Convert to inline block-level elements (that is, do not wrap by default, but you can set properties such as width, height, margin, padding, and so on)

In addition, you can also set the Float:left/right, positon:absolute/fixed properties for inline elements, or convert inline elements into block-level elements, but do not inherit the width of the parent element by default, and you can set width, height, Margin, padding, and other attributes. However, when replacing, it is also important to note that this method is converted to block-level elements only the side effects of float and position, and their own effect interferes with the layout effect.

<Divclass= "Child">    <spanclass= "Test">In-line elements</span> </Div> <Divclass= "Child">Block-level elements</Div>

. Test{Background-color:#000000;Color:#FFFFFF;float: Left;width:90px;}. Child{Background-color:#125645;width:150px;Height:40px;Color:#FFFFFF;margin:10px;Overflow:Hidden;Display:Inline-block;}

Reference: HTTPS://WWW.JIANSHU.COM/P/274614A078F3

78222833

Understanding of element and block elements in HTML lines