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

Question

我尝试在标记中使用column-count css3属性，其中包含多个段落。在Webkit浏览器上，我看到了什么似乎是一个bug。在某些屏幕尺寸下，段落边距无法很好地分割各列。

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

这里是CodePen of the problem。 我已将宽度修正为1000px，因此Chrome * / Safari用户的问题显而易见。

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

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

任何想法的人？

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需在p内添加：

display: inline-block;