border-collapse is an useful property which applies to tables. It allows us to make table borders collapse into
an unique border. It accepts two values: collapse and separate. The former value, as its name says, makes borders collapse, while the latter keeps them separate. Unfortunately, this property can be applied to tables only. For example, if you have some floated boxes like these:
body {
margin: 0 auto;
width: 306px;
padding: 2em 0;
}
div.float {
width: 100px;
height: 100px;
border: 1px solid red;
background: orange;
text-align: center;
color: #fff;
font-weight: bold;
text-transform: uppercase;
float: left;
line-height: 100px;
}
you will see something like the following picture:
As you can see, borders don't collapse. It would be extremely useful for web developers if the CSS Working Group would take into consideration the possibility of extending this property to all elements. Well, we'll see.
A negative margin the same width as the border would work just as well for this. But that solution doesn't work for tables, as margins don't apply to table cells (I'm pretty sure).
Just add margin: -1px 0 0 -1px; to your div.float rule above.
(This isn't a point against the idea - I still kinda like it. I'm just pointing out that there are work arounds.)
@Tim: Whilst that's a pretty good hack, it's not ideally precise: the layout about requires the negative margin to be applied on different sides, depending upon the position of each float within the 'grid'. For some layouts (e.g. variable width), that's impossible to predict. border-collapse looks like a great solution to me.