Block-level elements and Inline elements

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>

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

Block-level elements

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

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

Inline-block elements

The following inline elements have width and height.

• applet
• button
• embed
• iframe
• img
• input
• object
• select
• textarea

Block-level elements or Inline elements

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

• del
• ins