Question

我的不好，我有一个div和一个div-table：

<div style="padding: 20px; border: 1px solid red;">
  <div style="width: 100%; display: table; border-spacing: 20px;">
    <div style="display: table-cell; width: 33%; border: 1px solid blue;">a</div>
    <div style="display: table-cell; width: 33%;">a</div>
    <div style="display: table-cell; width: 33%;">a</div>
  </div>
</div>

距离为蓝色方块，红色方块为40px而非20px。

我无法将表的边框设置为零宽度，因为border是一个外部距离，而间距（就像填充）是一个内部距离。

我不能放弃border-spacing因为原则上它是正确使用它的决定。

知道如何在不更改外部20px填充的情况下到div的距离吗？

Answer 1

添加20px的负边距，因此请将HTML更改为：

Demo Fiddle

<div style="padding: 20px; border: 1px solid red;">
    <div style="width: 100%; margin:-20px;display: table; border-spacing: 20px;">
        <div style="display: table-cell; width: 33%; border: 1px solid blue;">a</div>
        <div style="display: table-cell; width: 33%;">a</div>
        <div style="display: table-cell; width: 33%;">a</div>
    </div>
</div>

那就是说，我还建议你将你的风格移出内联，并质疑你真正想要完成的事情 - 通过这样做，你实现了一种风格来覆盖已经存在的风格 - 这表明你应该只需删除现有的样式（虽然我很感谢你已经注意到你不能）。

Answer 2

对于水平和垂直，您是否希望边框间距（单元格之间的间距）为20像素？

尝试在水平方向上，单元格的间距为20 px，但垂直方向为0px。

border-spacing:20px 0px;

没有外部间距的边界间距

2 个答案:

Demo Fiddle