複数列レイアウトのテキスト行の垂直方向のリズム

Question

複数列のレイアウトが必要ですが、作成しようとするとダミーテキストで塗りつぶすと、テキスト行の配置が少し異なります。

私はflexbox divと2列の<table>でテストしましたが、結果は同じです。また、ChromeとFirefoxでテストしました。

緑の線は、同じ（良い）垂直位置を示していますが、赤の線は不均等を示しています。

（テストpuposesの場合、ブラウザのウィンドウをリサイズして、幅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.2emではなく2.1emであり、2行は通常通りです。

解決策：余白を行の高さと同じ値に設定します。

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

編集：
ブラウザが異なる方法で行の高さを表示しているようです。行の高さがピクセルの整数でない場合、Chromeは値を四捨五入して使用します。 Firefoxは明らかに分数を覚えていて、次の分数を計算するときにそれを使います。したがって、値が17.4ピクセルの場合、Firefoxは最初の2行に17ピクセル、次の2行に18ピクセルを使用します。 IE11もそうです。
例（2.4ピクセルを使用）については、this fiddleを参照してください。

フォントサイズの割合ではない特定のピクセル数に行の高さを設定する以外に、解決策があるかどうかはわかりません。

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