為什么帶有“display：table-cell;”的div不受保證金的影響？我有div彼此相鄰的元素display: table-cell;。我想margin在它們之間設(shè)置，但margin: 5px沒有效果。為什么？我的代碼：<div style="display: table-cell; margin: 5px; background-color: red;">1</div><div style="display: table-cell; margin: 5px; background-color: green;">1</div>
3 回答
繁星coding
TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超4個贊
原因
從MDN文檔：
[margin屬性]適用于除table-caption，table和inline-table之外的表顯示類型的元素以外的所有元素
換句話說，該margin物業(yè)是不適用display:table-cell的元素。
解
請考慮使用該border-spacing屬性。
請注意，它應(yīng)該應(yīng)用于具有display:table布局和的父元素border-collapse:separate。
例如：
HTML
<div class="table"> <div class="row"> <div class="cell">123</div> <div class="cell">456</div> <div class="cell">879</div> </div></div>
CSS
.table {display:table;border-collapse:separate;border-spacing:5px;}.row {display:table-row;}.cell {display:table-cell;padding:5px;border:1px solid black;}請參閱jsFiddle演示
水平和垂直不同的邊距
正如DiegoQuirós所提到的，該border-spacing屬性還接受兩個值來設(shè)置水平軸和垂直軸的不同邊距。
例如
.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */
動漫人物
TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超10個贊
表格單元格不考慮邊距，但您可以使用透明邊框：
div {
display: table-cell;
border: 5px solid transparent;}注意：你不能在這里使用百分比...... :(
添加回答
舉報
0/150
提交
取消