摺疊adjasent元素的垂直邊界？

如何摺疊兩個相鄰元素的垂直邊框而不刪除邊框頂部/邊框底部？摺疊adjasent元素的垂直邊界？

對於前：

<style type="text/css"> 
.bordered { 
    border:1px solid #000000; 
} 
</style> 
... 
<body> 
    <div class="bordered">bordered_1</div> 
    <div class="bordered">bordered_2</div> 
</body>

的一種方式，我發現是

margin-top:-1px; 
margin-bottom:-1px;

添加到.bordered。但是，如果我改變邊框厚度，我也必須改變邊距和邊距。另一種方法是設置：

body { 
    display:table; 
    border-collapse:collapse; 
} 
.bordered { 
    display:table-row; 
    border:1px solid #000000; 
}

這似乎有良好的瀏覽器兼容性（在IE 9，FF，Chrome的測試），但它是一個哈克代碼排序。有沒有更優雅的方式？

來源

2015-02-11 Kshatra

什麼是在使用*哈克的方式*做*哈克工作*問題？ – 2015-02-11 09:51:03

爲什麼你不想刪除一些邊界？對我來說，它似乎不如在桌面上使用display：table。 – fcalderan 2015-02-11 09:53:04

另一個解決方案可以是'margin-top：-1px;'帶有js生成的值 – tomtomtom 2015-02-11 09:55:53

對於示例的範圍有限，你可以簡單地指定與bordered類的元素不應該有一個border-top如果用同一類的元素立即之前，使用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>

來源

2015-02-11 11:10:41 CBroe

這很好，但只有零垂直邊距。 – Kshatra 2015-02-11 12:23:18

這就是爲什麼我用這個全部答案作爲前綴_「對於您的示例的有限範圍」_ ...如果您在需求中包含垂直邊距，那麼我實際上並沒有看到在這些條件下「摺疊邊界」是如何理解的？兩個元素之間的「摺疊」邊界會是什麼樣子，如果這兩個元素之間存在差距？ – CBroe 2015-02-11 12:26:58

如果其中一個元素具有邊距，那麼它們不會摺疊，並且會使用不同的邊框進行渲染，就像使用border-collapse：table中的表格單元格一樣。重點是：有時兩個元素是相鄰的並且沒有邊界，在這種情況下，他們的邊界應該崩潰。但是當它們中的一個具有垂直邊緣或者它們不相鄰時 - 在這種情況下，它們中的每一個都應該用它自己的邊界呈現。基本上試圖想象所有塊元素都具有「border-collapse」css屬性的實現。 – Kshatra 2015-02-12 11:30:47

摺疊adjasent元素的垂直邊界？

回答

相關問題