垂直方向に複数の段落と画像が並ぶとき、間隔を均一にしたければ、それぞれ同じ大きさのmargin
プロパティを適用するだろう。
しかし実際には、このようにすると段落と画像の間隔がやや詰まって見える。段落同士の間隔に比べて、段落と画像の間隔が少し狭く感じる。
これはハーフレディングが原因の現象だ。line-height
プロパティの仕様上、テキストの行の上端と下端には余白が設けられる。たとえばfont-size
プロパティが16px
で、line-height
プロパティが24px
であれば、上下に4px
の余白ができる。
段落が連続する場合、margin
プロパティの値に加えてこのハーフレディングを加えた分の大きさの余白ができる。前の段落の下端のハーフレディングと、後の段落の上端のハーフレディングが組み合わされるため、ハーフレディングの2倍分の余白が含まれることになる。margin
プロパティが24px
で、ハーフレディングが4px
であれば、大きさは合計で32px
になる。