Skip to content
techsnow

Inline & Block Elements

Inline Elements

An inline element:

  • does not start on a new line,
  • takes only as much width as its content needs,
  • ignores width and height, and only uses left/right margins.

Common inline elements:

<span>  <a>  <strong>  <em>  <img>  <code>  <label>  <button>  <input>

Example:

<p>This is <strong>bold</strong>, this is <em>italic</em> and this is <a href="#">a link</a>, all on one line.</p>

Block vs inline

BlockInline
New lineYesNo
WidthFull container widthOnly as wide as content
Width/heightRespectedIgnored
Can containBlock and inline elementsOnly inline elements and text