Concepts and differences between block, inline, and inline-block

Overall Concept

1. Block and inline are two simple concepts. They should be block-level elements (Block-level elements) and inline elements (Inline elements ). The block element is usually regarded as an independent block and will be replaced by a single line. The Inline element does not generate line breaks before and after it, and a series of inline elements are displayed in a row until the row is full.
2. Generally, HTML elements have their own layout levels (block elements or Inline elements ):
   • Common block-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, and BR.
3. Block elements can contain block elements and inline elements, but inline elements can only contain inline elements. It should be noted that this is a rough statement. The elements that each specific element can contain are also specific. Therefore, this rule is not applicable to individual elements. For example, P elements can only contain inline elements, but cannot contain block elements.
4. In general, you can change the layout level of an element through the settings of display: inline and display: block.

Block, inline, and inlinke-block details comparison

• Display: Block

1. 1. The block element excludes one row, and multiple block elements create a new row. By default, the block element width automatically fills the width of its parent element.
   2. You can set the width and height attributes for the block element. A block-level element occupies only one row even if its width is set.
   3. You can set the margin and padding attributes for the block element.

• Display: inline

1. 1. The Inline element does not exclusive to a row. The elements in multiple adjacent rows are arranged in the same row, and the width of the inline element changes with the content of the element until the rows cannot be arranged.
   2. The width and height attributes of the inline element are invalid.
   3. The margin and padding attributes of the inline element. The paintding-left, padding-right, margin-left, and margin-right attributes in the horizontal direction all generate the margin effect, but the padding-top attribute in the vertical direction, padding-bottom, margin-top, and margin-bottom do not produce margin effects.

• Display: inline-block

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

Additional instructions

• In general, we will use display: Block, display: inline or display: inline-block to adjust the layout level of the element. In fact, the display parameters are far more than these three types, which are just more common.
• IE (earlier versions of IE) does not support inline-block, so display: inline-block is used for inline elements in IE. In theory, ie does not recognize any other elements, but display: inline-block triggers layout in IE, so that the inline element has the display: inline-block attribute representation.