Block-level elements and Inline elements


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.)

<p>
<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>
</p>

Inline element Inline element Inline element


List of block-level elements


List of inline elements

The following inline elements have width and height.

Inline-block elements
applet button embed iframe img
input object select textarea

List of other elements

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

Block-level elements or Inline elements
del ins