【CSS Tip】インライン要素にはmarginの上下が効かない問題とその対策

aタグにmargin-topをかけようと思ったら効かなかった

CSSのmarginに関するヒントをご紹介します。

僕がこの問題に出会ったのは、aタグのmargin-topを取りたいと思っていた時でした。

margin-topをいくらかけても全く効かない。

なのに、line-heightや、margin-right&left、paddingはなぜか効いている。。

ググってみると、どうやらインライン要素はそういう風にできているらしい。

対処法

対策はそんなに難しくありません。

margin-top: 20px;
display: inline-block;

このように、「display: inline-block;」を足してやれば、インライン要素的な並び方をしながらも、上下の余白設定や、高さの設定が自由にできるようになります。