<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 spancannot 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.
As you can see, inline-block is a hybrid that:
- Creates a rectangular region (a block)
- Doesn't create any new lines (hence "in line")