Webkit CSS3 列为其容器添加了额外的填充。答案

【问题标题】：Webkit CSS3 column adds an extra padding to its container.Webkit CSS3 列为其容器添加了额外的填充。
【发布时间】：2013-07-20 00:31:50
【问题描述】：

我为图片库创建了一个 CSS3 多列布局，在 Firefox 上看起来不错。

HTML：

<section id="featured">
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
    <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>

css：

#featured {
    width: 730px;
    padding: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    -webkit-column-fill: balance;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -moz-column-fill: balance;
    column-count: 2;
    column-gap: 10px;
    column-fill: balance;
    background: #7d90a5;
}

article {
    width: 300px;
    display: block;
    background: #344252;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 10px;
    width: 335px;
    margin-bottom: 20px;
}

article img{
    width: 335px;
    display: block;
}

问题是，当我使用 Chrome 浏览器打开它时，它会在 <section> 的底部添加额外的空间，我不知道要修复它。我在网上搜索并找到了这个thread，但我不确定它是否是同一个问题。

检查此fiddle 链接并尝试同时使用 Chrome 和 Firefox 打开。

【问题讨论】：

我不知道解决方案，但是当您从 article 样式中删除 -webkit-column-break-inside: avoid; 时，大空间消失了。然而，这会在右栏的顶部留下看似空白但不存在的文章。
是的，这会破坏右上角的图片。我还在寻找纯css解决方案...

标签： html css webkit multiple-columns

【解决方案1】：

试试这个 CSS

#featured 
{
    overflow:hidden;        
}

【讨论】：

对我来说这行得通.. 目前我最好的选择是容器得到一个不使用列的元素的近似高度。但也许有人可以更好地解释这种行为（或指出某处的解释）。
这是针对没有填充问题的人的解决方案。
这正是我所需要的。你让我头疼不已。谢谢
哇，比将我的块元素转换为内联块好多了。

【解决方案2】：

不要使用属性column-break-inside: avoid; 任何margin 或padding，border 只是margin-bottom，我认为这是解决此问题的最佳解决方案。 http://jsfiddle.net/SdtP5/3

【讨论】：

【解决方案3】：

你在每篇文章中使用margin-bottom 20px，并将容器填充到 20px 到，

看到这个fiddle

#featured {
   padding: 20px 20px 0 20px
 ...}

【讨论】：

解决这个问题的好方法，我认为这是问题的正确答案。

【解决方案4】：

如果我理解正确的问题，您可以尝试添加padding:0 甚至是padding:-10px; 或类似容器的内容

【讨论】：

【解决方案5】：

你做了padding: 10px;，它还在底部添加了填充。使用它来删除底部的填充：

padding: 10px 10px 0px 10px;

【讨论】：

【解决方案6】：

如果我对问题的理解正确，请尝试...

#featured{
   padding: 20px 20px 0 20px;
   ...
}

和

#article{
   display: inline-block;
   ...
}

【讨论】：

padding: 20px 0 20px; 也足够了。

【解决方案7】：

快速修复，仅针对 -webkit- 浏览器

#featured {
    -webkit-margin-after: -110px;
}

此外，在使用列时，我发现将内部元素显示为内联块有助于防止它们分开（在您的情况下）

article {
     display: inline-block;
}

【讨论】：

显示：内联块；帮助我避免新列顶部的额外边距。谢谢！
显示：内联块；使列最终可用。简直不敢相信这么简单，谢谢！
显示：内联块；也为我工作。谢谢！

【解决方案8】：

替代使用 { display: inline-block }

article {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

来源：Similar issue、CSS Tricks

【讨论】：

【解决方案9】：

这只是空白！

section {font-size:0}
article {font-size: 1rem} /* if necessery */

【讨论】：