多列布局中文本行的垂直节奏

Question

我需要一个多列布局，但是当我尝试创建它并用虚拟文本填充它时，我可以看到文本行的对齐方式略有不同。

我使用flexbox div和两列<table>测试了它，但结果是一样的。我还在Chrome和Firefox上测试了它。

绿线显示相同（那是好的）垂直位置，而红色显示不成比例。

（为了测试目的，浏览器窗口已调整大小，宽度为670像素）

- Fiddle with flexbox

- Fiddle with table

<style>
body {
  display: flex;
}
div {
  flex: 1;
  margin: 10px;
}
div:last-of-type {
  flex: 2;
}
</style>

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 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. 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 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. 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 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. 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>
</div>

它可能只是渲染引擎中的错误，但我不确定。也许，它可以用CSS修复。

我还尝试指定精确的字体大小和行高，如下所示：

p {
  font-size: 16px;
  line-height: 110%;
}

但它无法解决问题。

Answer 1

问题是p的边距是1em。因此，如果在行高为110％（1.1em）的文本中有段落，则行间距为2.1em，而不是2.2em两行正常占用。

解决方案：将边距设置为与线高相同的值。

p {
  /* font-size: doesn't matter */
  line-height: 110%;
  margin: 1.1em 0; /* same as line-height */
}

编辑：
似乎浏览器以不同的方式显示行高。如果行高不是整数像素，则Chrome会对该值进行舍入并使用该值。 Firefox显然会记住该分数并在计算下一个分数时使用它。因此，如果该值为17.4像素，Firefox前两行使用17个像素，下一行使用18个像素。 IE11也是这样做的 有关示例，请参阅this fiddle（使用2.4像素）。

我不确定是否有解决方案，除了将行高设置为不是字体大小百分比的特定像素数。

p {
  /* font-size: now does matter, sorry */
  line-height: 18px; /* or anything appropriate */
  margin: 18px 0; /* same as line height */
}