display: table-cell 无法使用 margin/ padding 的解法

老白 3个月前 142浏览 0评论

之前发过一篇,用div+css替代table的文章,因为div+css实在好用。

已实际用过display: table的朋友,当你们在使用的时候,也许会碰到「间距调整」的问题,例如要在每一个table-cell裡头设定margin等间距调整,却发现修改无效。假设你碰过这种状况,不妨参考一下我推荐的解法。

话不多说,先上个范例!我使用图片+图说当作范例,例子包含:

正常状况下,图片紧密排列

使用margin调整的结果

将宽度写死的结果

使用border-spacing调整的结果

正常状况下,图片紧密排列

一般我们要做水平排列的图层,多半会使用float或display等属性设定。如果今天你有製表的需求,或是其它因素考量,也可以尝试使用display:table达成。

display:table在预设情况下,只要我们给他一个宽度,裡面的元素就会自动依据总宽度分散对齐。

在这边,因为每张图宽为 120px,所以我先设定总宽是 480px,这样他们就会紧密排列在一起,如下图所示:

display: table-cell 无法使用 margin/ padding 的解法 CSS学习 第1张

使用 margin 调整的结果

如果我们希望每张图都有一点空隙,不要紧密排列的话。正常思维下,都会使用margin达成。因此我在范例二加入了这段语法:

.case-2 figure {
  margin: 10px;
}

显示结果为(你可以尝试将 10px 修改成 100px,会发现没有任何作用):display: table-cell 无法使用 margin/ padding 的解法 CSS学习 第2张

因此可以发现,margin对display:table*一家子是没有任何作用的。

将宽度写死的结果

既然margin没有任何作用,我们可能会利用display:table分散排列的特性,手动设定宽度让图片对齐。

例如:4x120px + 5x5px = 480 + 25 = 505px

将整体宽度设定为 505px 后,就会根据宽度分散对齐,变成下面的图片效果:

display: table-cell 无法使用 margin/ padding 的解法 CSS学习 第3张

乍看之下达到了我们想要的效果,每张图片中间都有间隙。但仔细研究后你会发现两个问题:

第一张图片的最左边还是贴齐 div,没有任何空隙

假使图片超过四张,间隙就会消失了(因为图片宽度写死,所以没弹性)

由此可知,将宽度写死,绝对不是一个好解法。曾经尝试过用这种解法的朋友,建议把它抛诸脑后吧!

使用 border-spacing 调整的结果

利用border-spacing,是目前普遍认为较适当的解法。

我们只要在display:table-cell的父层,也就是display:table这层加上第 3 跟 4 行的两行语法就可以萝:

.image-list {
  display: table;
  border-collapse:separate;
  border-spacing: 5px;
}

显示结果如下
display: table-cell 无法使用 margin/ padding 的解法 CSS学习 第4张

跟刚刚使用宽度写死的范例图片相比,可以方便每一张图片的左右空隙都是一样的,不管是第一张或是最后一张,都留有 5px 的空隙。

但因为我们必须将这个设定写在父层,所以在image-list底下的所有display:table-cell都会套用此设定,如果有的 table 不想要有空隙设定,就必须单独把 HTML 的结构拉出来,或是再用 CSS 权重覆盖,算是比较麻烦的一点。

目前还无法只针对table-cell做调整,希望以后 W3C 可以增加更多对display:table*的支援度萝!

最后再看一次线上范例,加深自己的印象吧!请记得,将宽度写死,绝对不是一个好解法哟


发表评论
展开