CODEWITHSUNDEEP
csshtml
Dave
Dave

Reputation: 143

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

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)

Upvotes: 14

Views: 20809

Answers (1)

No Results Found
No Results Found

Reputation: 102774

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

Upvotes: 28

Related Questions