div and span: display = 'block', 'inline', or 'inline-block' ?
October 26, 2010
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.
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.- Creates a rectangular region (a block)
- Doesn't create any new lines (hence "in line")
For more information
- quirksmode.org - what CSS "display:" does
- stackoverflow.com - is "div" different than "span display: block"