Features of inline elements, block-level elements, and display properties in CSS

Inline elements and block-level elements of CSS

Block-level elements

1. The two concepts of block and inline are abbreviated, complete and exact, block-level elements (block-level elements) and inline elements (inline elements). Block elements are usually separated by a separate line, and the inline element does not produce a newline, and a series of inline elements are displayed in a row until the row is full.

2. In general, the HTML element has its own layout level (block element or inline element):

3, common block-level elements have DIV, FORM, TABLE, P, PRE, H1~h6, DL, OL, UL and so on.

4. Common inline elements are SPAN, a, strong, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR, etc.

The block element can contain both the block element and the inline element, but the inline element can only contain inline elements. Note that this is a general statement that each specific element can contain elements that are also specific, so specific to individual elements, this rule is not applicable. For example, the P element can contain only inline elements, not block elements.

In general, you can change the layout level of an element by setting the Display:inline and Display:block.

Several common property values in the Display property

Display:none is the element hide does not show

Display:block

1, the block element will be exclusive row, multiple block elements will be a new row. By default, the block element width automatically fills the width of its parent element.

2. The block element can set the Width,height property. Block-level elements, even if they are set to a width, are still exclusive rows.

The block element can set the margin and padding properties.

Display:inline

1, the inline element does not have a single row, multiple adjacent inline elements are arranged in the same row, until a line is not arranged before a new line, its width varies with the content of the element.

2, nline element set Width,height property is invalid. /3, the margin and padding properties of the inline element, horizontal padding-left, Padding-right, Margin-left, margin-right all produce margin effects; But the vertical direction of the Padding-top , Padding-bottom, Margin-top, Margin-bottom will not produce a margin effect.

Display:inline-block

1. Simply, the object is rendered as an inline object, but the object's contents are rendered as a block object. Subsequent inline objects are arranged in the same row. For example, we can give a link (a element) Inline-block attribute value, so that it has both block width height and inline peer characteristics.

2, when there is a line break between the two element tags, if the element is displayed side-by INLINE-BLOCKDE, if the parent container's width is exactly the sum of the width of the child element, it may not be displayed side by side, The reason is that Inline-block will render the line break to occupy a certain amount of space, so in order to let the child elements appear side-by, you can set font-size:0 on the parent container, so that the space does not occupy space, if the child element is also displayed in the text content, Then set the Font-size on the sub-container as well.

Characteristics of inline elements, block-level elements, and display properties in CSS