Dustin Boswell - Brain Dumps about Computers, Programming, and Everything Else
dustwell.com About Me Past Academic Work Photo Album Links I Use
Articles by Me Subscribe: RSS
Oil ETFs leak money Yes/No proposition bets div, span, and CSS "display:" Pair programming + screen Dear VirginAmerica.com SSH keys in 2 easy steps "An hour" vs. "A hour" How to hash passwords Snapshotting with Rsync MacBook Pro Sharp Edge Fixing Your Flaky Internet How X-over-SSH works Drinking Distilled Water Politician != Decider Understanding iTunes files My Audi A4 Gas Mileage djb-dns installation Vim Cheat Sheet
div and span: display = 'block', 'inline', or 'inline-block' ?
October 26, 2010

Background: the difference between div and span

<div>

  • A "block-level element"
  • can contain all other elements!
  • can only be inside other block-level elements
  • defines a rectangular region on the page
  • tries to be as wide as possible
  • begins on a "new line", and has an "carriage return" at the end, like a <p>

<span>

  • An "inline element"
  • cannot contain block-level elements!!
  • can be inside any other element
  • defines a "snake" on the page
  • tries to be as small as possible
  • doesn't create any new lines.
Simple <div>s and <span>s span span . . . . . . . . . . . . . . . . . . . . . . . . . . . span
div
span
div

From a rendering point of view,

<span> == <div style="display: inline">
and
<div> == <span style="display: block">.
As for HTML syntax, however, a div cannot be nested inside an inline element, whereas a span cannot contain block-level elements.

But there is also the mysterious "display: inline-block". What is it...?

block vs inline vs inline-block

Below are a bunch of <div style="width: 50px"...> with different display: settings.
display: block
display: block
display: block
display: block
display: inline
display: inline
display: inline
display: inline
display: inline-block
display: inline-block
display: inline-block
display: inline-block
As you can see, inline-block is a hybrid that:

For more information

blog comments powered by Disqus