div versus span tags

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I know the basic difference between these two tags, but there is one thing I
don't understand about the span tag? Unlike the div tag, specifying a width
and height of a span tag doesn't work unless you have "position:absolute"
within it. Why is this? What does the position style have to do with the
width and height styles?

Re: div versus span tags

Quoted text here. Click to load it

First of all, a terminological nitpick: *tags* don't have properties,
*elements* do.  Tags are just the markers that show where elements begin
and end; they're really a sort of labelled parentheses.

Span elements are considered inline elements, whereas div elements are
considered block elements.  You can think of block elements as "containers"
(which may contain sub-containers), whereas inline elements are content
that doesn't contain any further containers.  Properties like height and
width apply only to block elements.  The height and width of inline
elements is determined by the document flow.

However, when you position something absolutely, you're taking it out of
the normal document flow, so it doesn't get to pick up properties from its
container.  A lot of the normal distinctions between block and inline
elements vanish when you position them absolutely.

Site Timeline