Inline elements and block-level elements

1.1 Block-level Elements:

  • It has a row to itself;
  • Its width and height can be set;
  • By default, the width is 100%;

For example,

, < H1-H6 >,

    , < OL >,

  • , etc.

1.2 inline elements:

  • Its width is determined by the content, and its height is determined by the content font size;
  • It cannot set width and height;
  • It can be on the same line as any other inline element;

For example, ,

1.3 inline-block elements:

  • It can be on the same line as any other inline element,
  • The width and height of the elements and the spacing from the edges can be set;

For example, , ,

Block level element, inline element, inline block level element conversion

2.1, display: block; Convert to block-level elements.

2.2, display: inline; Convert to inline elements.

2.3, display: inline-block; To block level elements in a row.