Reputation: 425
How can I collapse vertical borders of two adjacent elements without removing border-top/border-bottom?
For ex:
<style type="text/css">
.bordered {
border:1px solid #000000;
}
</style>
...
<body>
<div class="bordered">bordered_1</div>
<div class="bordered">bordered_2</div>
</body>
One way i found is to add
margin-top:-1px;
margin-bottom:-1px;
to .bordered. But this way if i change border thickness i also must change margin-top and margin-bottom. The other way is to set:
body {
display:table;
border-collapse:collapse;
}
.bordered {
display:table-row;
border:1px solid #000000;
}
It appears to have good browser compatibility(tested on IE 9, FF, Chrome), but it's a hacky sort of code. Is there a more elegant way?
Upvotes: 0
Views: 1467
Reputation: 96456
For the limited scope of your example, you could simply specify that an element with class bordered
should not have a border-top
if it is preceded immediately by an element with that same class, using the adjacent sibling combinator, +
:
.bordered {
border:1px solid #000000;
}
.bordered + .bordered {
border-top:0 none;
}
<div class="bordered">bordered_1</div>
<div class="bordered">bordered_2</div>
Upvotes: 2