HTML: How to keep spans with padding and borders from overlapping?

Question

I have multiple spans with padding and borders one right after another that I want to wrap as the window dictates. But when they wrap, they overlap. Any way to keep them from overlapping without using a table? (Note: they only overlap vertically. horizontally they are fine)

Answer 1

Use display:block

<span> is display:inline by default, so the borders and padding you added aren't actually affecting it's size. You're seeing the overlap because the width of the border/padding is larger than the line-height

You may need float:left as well, or you can try display:inline-block instead.

More info on display: http://www.quirksmode.org/css/display.html