如何使用边距正确播放css列？

Question

http://arcanatheatre.com/

在safari中，第二列显得更高。两列都以h4开头，但似乎div本身的顶部填充仅适用于第一个..或者其他东西。不确定发生了什么。它在Chrome中排队

Answer 1

据我所知，CSS3列的当前[19/09/2012]实现有时会从一列的底部获取边距/填充，并将其中的一部分带到下一列。我不确切知道这是如何确定的，但是我在使用布局时遇到了问题，因为我改变了内容的数量，有时列的顶部会排成一行，有时它们不会。这有点随意。

我想出的解决方案是：

对于（在您的情况下，“以”为特色“，”以“，”表演“，等为导演）的部分，应用以下规则：

-moz-column-break-inside:avoid;
-webkit-column-break-inside:avoid;
column-break-inside:avoid;

然后，不使用边距来分隔部分，而是使用填充。填充被认为是我们告诉它不要打破内部的部分，而边缘不是。

Answer 2

你可以很容易地看到你有填充

并且您的.info正在运行

删除.info顶部填充，你会没事的。

这一切都发生了，因为你的h4已经有了相同的填充。