On 8/19/05, Jared Nielsen <[EMAIL PROTECTED]> wrote:
> If I apply the following style to it [a lot of text in a span]:
>
> .description {
> padding-top: 100px;
> font-size: 10px;
> border: 1px solid red;
> }
>
> I get five different boxes... [one for each line in the span]
>
> Whereas if I apply the following style:
>
> .description {
> display: block;
> padding-top: 100px;
> font-size: 10px;
> border: 1px solid red;
> }
>
> I get one block.
>
> Now I get the block issue, but is it true that each "line" within a span is
> treated as it's own "box"?
Hi, Jared,
As Ingo mentions, each character is part of a larger line-box. What
you're seeing here is what the specification calls the "inline
formatting context."[1] It's what lets browsers figure out how high a
line of text should be. It has very different rules about how the box
model works. Although it can be a rough read through, that section can
help explain a lot about how to format inline elements.
You pretty much already have the answer there (about each line box
being its own box), but take care to note that the spec says that
border, margins and padding shouldn't actually appear on the edges of
each line within the span, only at the ends of the span itself. IE
does not interpret this correctly and makes it look like individual
boxes, instead of a ribbon that is cut at the end of one line and
started up again at the beginning of the next.
Something else to consider is that while browsers define span tags as
defaulting to display: inline, any element with the display styled as
"inline" will behave this way. This is how many horizontal navigation
designs get away with using lists instead of spans for the blocks
surrounding the links.
HTH,
Michael
[1] http://www.w3.org/TR/CSS21/visuren.html#inline-formatting
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
