> I have the following HTML:
> 
>   <span>A<span>B<span>C</span>D</span>E</span>
> 
> I've set up some CSS to put borders round span elements. It's supposed 
> to display as follows:
> 
>   +---------+
>   | +-----+ |
>   | | +-+ | |
>   |A|B|C|D|E|
>   | | +-+ | |
>   | +-----+ |
>   +---------+
> 
> However, no matter what I do, it actually renders like this:
> 
>   +-+-+-+-+-+-+
>   |A|B|C|D|E|F|
>   +-+-+-+-+-+-+
> 
> Any idea how I fix this?

I tried giving it both padding and margin, but didn't get what you 
wanted. However, display:block did the trick. It makes the span behave 
just like a div (and a div with display:inline would be identical to a 
span). You need to give it explicit width though; the default is 100% of 
the container block (the whole page in my test).

Post a reply to this message