使用带 CSS3 和 WebKit 的列计数的列的额外边距

Question

我正在尝试在包含多个段落的标签上使用 column-count css3 属性。在 Webkit 浏览器上，我看到了似乎是错误的东西。在某些屏幕尺寸下，段落边距无法很好地跨栏分割。

这是一个屏幕截图（请注意，以单词 "Duis" 开头的第三段被删除，而它应该与屏幕顶部齐平）：

这是一个 CodePen of the problem。我已将宽度固定为 1000px，因此问题对 Chrome* / Safari 用户来说很明显。

*编辑：只是在 2018 年初回头检查，Chrome 不再受此错误的影响。 Safari（测试 11.0.3）可以！

我尝试使用 page-break-* 规则来强制段落避免断行。我也尝试根据 http://caniuse.com/#feat=multicolumn 的评论使用 -webkit-perspective:1，但这没有效果。

大家有什么想法吗？

article {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  width: 1000px;
}

p {
  margin-top: 0;
  margin-bottom: 1.3em;
}

<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>

Answer 1

只需要在p里面加上：

display: inline-block;

使用带 CSS3 和 WebKit 的列计数的列的额外边距

Additional margin over column using column-count with CSS3 and WebKit

css

css-multicolumn-layout