The difference between the block-level element and inline element

Block-level element

  • Block-level elements usually begin on a new line.
  • Block-level elements can contain inline elements and other block-level elements.

<div style="border: 1px red solid;">Block-level element</div>
<div style="border: 1px green solid;">Block-level element</div>
<div style="border: 1px blue solid;">Block-level element</div>

Block-level element
Block-level element
Block-level element

Inline element

  • Inline elements do not usually begin on a new line.
  • Inline elements can contain text and other inline elements.
    (Block-level elements cannot be contained in inline elements.)

<span style="border: 1px red solid;">Inline element</span>
<span style="border: 1px green solid;">Inline element</span>
<span style="border: 1px blue solid;">Inline element</span>

Inline element Inline element Inline element

List of block-level elements

List of inline elements

Inline elements

Inline-block elements

The following inline elements have width and height.

List of other elements

Block-level elements or Inline elements

The following element changes into a block-level element or an inline element by the situation.