【実務・中級編】インライン要素のボックスモデル（padding/margin） – HTML実践ガイド

—

1. 結論：インライン要素と「垂直方向の余白」の非情なルール

まず、結論から叩き込みます。インライン要素に対して`margin-top`や`margin-bottom`を適用しても、周囲の行ボックス（line-box）には一切影響を与えません。

ブラウザはインライン要素をレンダリングする際、テキストの「行の高さ（line-height）」を基準にして領域を確保します。そのため、いくら垂直方向にmarginを積んでも、それは「見た目の余白」として機能せず、文字通り「空振りに終わる」のです。

一方で、`padding-top`と`padding-bottom`は少し厄介です。これらは「見た目上の背景色」や「境界線（border）」は広げますが、「行の高さ（line-height）」を計算する際の領域は押し広げません。 つまり、paddingを広げすぎると、上下の行と重なってしまい、レイアウトが崩壊する原因になります。

—

2. ブラウザが裏側でやっていること：行ボックスの仕組み

ブラウザはテキストをレンダリングする際、仮想の「行ボックス」というコンテナを生成します。

• インライン要素のpadding/marginは、この「行ボックス」の高さには寄与しません。
• あくまで「文字の背景」として描画されるだけです。
• 結果、前後の行と被る（オーバーラップする）という、CSS初心者にとって最もデバッグしにくい挙動が発生します。

この挙動を理解せずに「インライン要素だからとりあえずpaddingで調整しよう」とすると、後々レスポンシブ対応で地獄を見ることになります。

—

3. 実践：現場で使える「綺麗な解決策」

では、実務ではどう対応すべきか。基本的には「`display: inline-block` に変換する」のが定石です。これにより、ブロックレベル要素のように余白を正しく制御しつつ、横並びの性質を維持できます。

以下のコードは、ボタンやタグのデザインでよく使う、堅牢な実装パターンです。

/ インライン要素を制御するためのベストプラクティス /
.tag-link {
/
1. インライン要素から変換。
これでpaddingやmarginが正しくボックスモデルとして機能するようになります。
/
display: inline-block;

/
2. 垂直方向の余白を制御。
line-heightと組み合わせることで、意図通りの高さが確保できます。
/
padding: 4px 12px;
margin: 0 4px;

/
3. 境界線を描画する場合。
inline-blockにしておけば、崩れを心配する必要はありません。
/
border: 1px solid #ccc;
border-radius: 4px;

/
4. テキストの垂直中央寄せ。
inline-blockはベースラインに揃うため、必要に応じて調整。
/
vertical-align: middle;
text-decoration: none;
}

—

4. 時と場合による使い分け：`inline`のままでいくべき時

全ての要素を`inline-block`にする必要はありません。例えば、文章の一部を強調する``や``、あるいは引用符などは、あえて`inline`のまま扱うべきです。