なぜか「上下の余白」が効かない？インライン要素の不思議なルールと攻略法
HTMLとCSSを学び始めて、最初にぶつかる「あれ？」の筆頭といえば、きっとこれではないでしょうか。
「文字を強調したくて``タグに`margin-top`を入れたのに、なぜか全然動かない！」
そうなんです。コードを書いていて「CSSが効かない！」と焦る瞬間、その原因の多くは、この「インライン要素の性質」に隠されています。今回は、このちょっと頑固なインライン要素たちと、どうすれば仲良く付き合っていけるのか、現場の知恵を交えてお話ししますね。
—
「インライン要素」は、例えるなら「文章の中の単語」
そもそも、``や``、``といったインライン要素は、その名の通り「行（ライン）の中」に収まる存在です。
これらをイメージするなら、「文章を書いているノートの文字」だと思ってください。ノートの行間を無理やり広げようとして、一文字だけ上に持ち上げようとしても、行全体が崩れてしまいますよね？
CSSのルールもそれと同じで、インライン要素は「行の高さ（line-height）」の中で生きるものなので、外側から上下に「もっとスペースを空けて！」と命令しても、ブラウザは「いや、行が崩れちゃうからダメだよ」と無視してしまうんです。
覚えておきたい「インラインのルール」
- 左右の余白（margin/padding）： 「横にスペースを作るだけなら隣の文字を押しのけるだけでいいよね！」ということで、有効です。
- 上下の余白（margin）： 「行をはみ出して上にスペースを作るなんて、文章が読めなくなるよ！」ということで、完全に無視されます。
- 上下の余白（padding）： 実は背景色などが付くと上下にも広がって見えるのですが、周囲の行とは重なってしまい、レイアウトを押し上げることはできません。
—
「どうしても上下に余白が欲しい！」そんな時の回避策
「ルールはわかったけど、デザイン上どうしても少しだけ上下に隙間が欲しいんだよ！」という時、ありますよね。そんな時のための、現場でよく使う「魔法のレシピ」を3つご紹介します。
1. `display: inline-block;` に変える（一番おすすめ！）
これが一番の特効薬です。「インラインの良さ（横に並ぶ）」を持ちつつ、「ブロックの良さ（余白を自由に操れる）」を兼ね備えたハイブリッドな状態にします。
.my-button {
display: inline-block; / これで上下のmarginが効くようになります /
padding: 10px 20px; / 上下の余白もバッチリ /
margin: 10px 5px; / 周囲の余白も自由自在 /
}
2. `line-height` で行間をコントロールする
もし、デザインの意図が「行間を広げたい」ということであれば、要素に個別にmarginをつけるのではなく、親要素やその要素自身に`line-height`を指定しましょう。これが一番、Webの基本ルールに則った綺麗な調整方法です。
3. `padding` で「見た目だけ」広げる
ボタンのように背景色がある場合、`padding`を使えば上下に広げることができます。ただし、先ほどお伝えした通り「周囲の行とは重なってしまう」ので、隣の行と被らないように注意が必要です。
ここは通常の文章です。この部分だけ背景色を付けて強調したい時、paddingなら上下にも広がって見えます。
—
つまずいた時は、「これは何者か？」を考えてみて
Web制作を始めたばかりの頃は、「なぜ思うように動かないの！」とイライラしてしまうこともありますよね。でも、それはあなたが悪いわけではなく、ブラウザが「文章の読みやすさ」を守るために頑張ってくれている証拠なんです。
「この要素は、もともとどういう役割で生まれたものかな？」と一息ついて考えてみると、意外とすんなり解決策が見えてくるはずですよ。
もしインライン要素の上下余白で詰まったら、まずは`display: inline-block;`を試してみてください。これだけで、世界が変わったように思い通りのレイアウトが作れるようになるはずです。
大丈夫、少しずつ慣れていけば、CSSはあなたの最高の相棒になってくれます。また何かあれば、いつでも聞きに来てくださいね！
コメント