如何在设置为显示表格单元格的div之间添加边距？ [英] How do I add margin between divs that are set to display table-cell?

问题描述

我设置一个父div来显示：table及其相应的三个子div来显示：inline-cell。这三个子div是水平堆叠的，我在三个子div上设置了三个像素的边界。我将如何去增加孩子divs之间的边距，以便将空间放在边界外部而不是内部？

I set a parent div to display: table and its respective three child divs to display: inline-cell. These three child divs are horizontally stacked and I have set a border of three pixels on the three child divs. How would I go about adding margin between the child divs so that the space is put on the outside of the border rather than on the inside?

推荐答案

您的css无效：display：inline-cell不是有效的css声明。您将需要使用display：table-cell。如果你想让它们堆叠在一起，那么你需要将每个表格单元格包装成一个表格行。

Your css is invalid: "display: inline-cell" is not a valid css declaration. You will need to use "display: table-cell" instead. If you want them to stack on top of each other that can be done as well, you will need to wrap each "table cell" into a "table row".

HTML

<div class="table">
    <div class="tableRow">
      <div class="tableCell">Cell 1</div>
    </div>
    <div class="tableRow">
      <div class="tableCell">Cell 2</div>
    </div>
    <div class="tableRow">
      <div class="tableCell">Cell 3</div>
    </div> 
</div>

CSS

.table{
border: 2px solid #999;
display: table;
border-spacing: 15px;
}
.tableRow{
    display: table-row;
}
.tableCell{
    border: 3px solid #333;
    border-collapse: separate;
    display: table-cell;
    border-collapse: separate;    
}

这篇关于如何在设置为显示表格单元格的div之间添加边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！