没有外部间距的边界间距

时间:2014-08-05 09:14:08

标签: html css

我的不好,我有一个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的距离吗?

2 个答案:

答案 0 :(得分:2)

添加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>

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

答案 1 :(得分:1)

对于水平和垂直,您是否希望边框间距(单元格之间的间距)为20像素?

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

border-spacing:20px 0px;