見出しやボタンなどに上下左右均等に余白を取ろうとして、padding: 10px と指定してもなぜか上下方向だけ伸びてしまうことがある。これは親要素に指定された line-height の影響を受けるためだ。
font-size:16px, padding:10px の場合
line-height:1.5 の場合、上下に 16px*0.5/2 = 4px ずつ余白ができるため、paddingの10pxとあわせて14pxの余白ができてしまう。
そのため、上下の余白は4px小さい値を指定する必要がある。
またline-heightが1.7など割り切れなくなる場合もあるので、その時はem（相対値）で指定するとわかりやすい。
em（相対値）で均等な余白を指定する場合は、左右方向から (line-height – 1)/2 を引いた値を上下方向の余白に指定する。
1em – (1.7 – 1)/2 = 0.65em
どちらにせよちょっと面倒なことには変わりないが…。