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

Block-level elements
address blockquote center div dl
fieldset form h1-h6 hr noframes
noscript ol p pre table
ul

List of inline elements

Inline elements
a b basefont big blink
br cite code em font
i label map nobr q
ruby s samp small span
strike strong sub sup tt
u var

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