Question

我有2 <div>具有样式属性display: table-cell。我需要在<div>添加左右边距，添加margin: 0 10px不起作用。并且我无法添加填充：0 10px，因为<div>背景设置为颜色而<div>也有边框。因此，如果我添加填充，<div>看起来就像继续扩展一样。我需要将2 <div>与一些像素分开。有什么想法吗？

<body style="background: #555;">

<div style="width: 100px; background: #fff; margin: 0 10px; display: table-cell; border: 1px solid #000">
</div>

<div style="background: #fff; margin: 0 10px; display: table-cell; border: 1px solid #000">
</div>

</body>

Answer 1

只需添加边框。

<div class="tableCell"></div>
<div class="tableCell"></div>

.tableCell {
    background: green;
    border-left: 5px solid white;
    display: table-cell;
    height: 100px;
    width: 50px;
}

Demo

Answer 2

如果要添加它们之间的距离。只需将两个div的显示属性更改为内联块并设置margin属性。

div
{
    display: inline-block;
    margin: 0 10px;
}

Answer 3

在您的<div>之间添加另一个<div>。并将这些样式规则添加到<div>：

width:10px; // The distance you wish to separate the 2 divs'
display: table-cell;
background: transparent;

这是一种简单的黑客技术。这会在这两者之间插入一个透明的<div>，看起来<div>被边距分开。

添加属性显示的2 <div>之间的距离：table-cell </div>

3 个答案: