div versus span tags

[TheKeith]

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?

 

[Eric Bohlman]

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?

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.

 

[TheKeith]

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.

Thanks a lot. That explains it.