line-height と padding の関係 - MoonNote

記事やサイドバーの見出し、あるいはボタンなどに上下左右均等に余白を取りたいとき、例えば padding: 10px と指定しても妙に上下方向だけ伸びていることがあるが、これは余白を指定した要素に含まれる文字が親要素に指定された line-height の影響を受けているためだ。 body { line-height: 1.5; } button { background-color: #eee; color: #333; font-size: 16px; padding: 10px; } 例えば、上記のようにfont-size: 16px のテキストを含むボタンが line-height: 1.5 を継承した場合、このテキストには {(16px * 1.5) - 16px} / 2 = 4pxの余白が上下に割り振られるため、表示されるボタンの余白は padding: 14px 10px の