Block,inline and Inline-block concepts and differences in CSS

The two concepts of 1.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):-Common block-level elements have DIV, FORM, TABLE, P, PRE, H1~h6, DL, OL, UL and so on. -Common inline elements are SPAN, a, strong, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR, etc. 3.block elements can contain both block and inline elements, but inline elements may only contain inline elements. Note that this is an approximate statement,
The elements that each particular element can contain are also specific, so the rule is not applicable to individual elements. For example, the P element can contain only inline elements, not block elements. 4. In general, you can change the layout level of an element by setting the Display:inline and Display:block.

Block,inline and inlinke-block details comparison

Display:block

The block element will have a single row, and multiple block elements will have their own new row. By default, the block element width automatically fills the width of its parent element.

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

The

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

the

inline element setting width,height property is invalid.

the margin and padding properties of the inline element, horizontal padding-left, Padding-right, Margin-left, and 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

in simple terms, 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.

Block,inline and Inline-block concepts and differences in CSS