～margin・paddingの違い、inline-blockまで～
目次
はじめに
Web制作を学び始めると、必ず直面するのが 「ブロックレベル要素」 と 「インライン要素」 の違いです。
- 「divとspanの違いがよく分からない」
- 「marginとpaddingってどう違うの？」
- 「インライン要素に幅や高さを指定しても効かないのはなぜ？」
これらは初心者が必ずつまずくポイントです。
さらに、近年のWeb開発では FlexboxやGrid といったレイアウト技術もよく使われるため、より正確な理解が必要です。
この記事では、ブロック要素とインライン要素の基本 → margin/paddingの違い → inline-blockの活用 までをわかりやすく解説します。
ブロックレベル要素とは
ブロックレベル要素は、「箱」や「段落」としてページを構成する要素です。
主な特徴
- 横幅いっぱいに広がる
- 前後に自動で改行が入る
- margin/paddingが上下左右すべて有効
- ページの構造を形づくる
👉 例：<div> <p> <h1> <section> <article>
実際のモノに例えると
ノートの「段落」や「章」がブロック要素。
文章が整理されて読みやすくなるのと同じ役割を担います。
インライン要素とは
インライン要素は、文字や小さなパーツとして流れの中に存在する要素です。
主な特徴
- 前後に改行が入らない
- 横方向のmargin/paddingは有効だが、上下は効きにくい
- 主に文字の装飾やリンクに利用
👉 例：<span> <a> <strong> <em> <img>
実際のモノに例えると
文章の中で強調する「マーカー」や「太字」。
文章全体の流れを止めずに、一部だけ装飾したいときに使います。
marginとpaddingの違い
CSSでよく使う margin と padding。
どちらも「余白」を作りますが、効く場所が違うため初心者が混乱しやすいポイントです。
| 用語 | 定義 | 影響範囲 | borderとの位置関係 |
|---|---|---|---|
| margin | 要素の外側にできる余白 | 他の要素との間隔を作る | borderの外側 |
| padding | 要素の内側にできる余白 | コンテンツと枠線の距離を作る | borderの内側 |
わかりやすいイメージ
- margin … 「要素と要素の間の空間」。border（枠線）の外にできる余白なので、隣のボックスを押しのける力を持ちます。
- padding … 「要素の内側のクッション」。border（枠線）の内側にできる余白なので、文字や画像を枠線から離す効果があります。
具体例でイメージを深める
たとえば下のようなボックスを考えてみましょう。
.box {
width: 200px;
border: 3px solid blue;
margin: 20px;
padding: 15px;
}
- margin:20px → ボックスの外側に20pxの余白ができ、周りの要素との間隔が広がります。
- padding:15px → ボックス内のテキストが枠線から15pxだけ離れ、読みやすくなります。
👉 borderを境目に、外ならmargin、内ならpadding と覚えると混乱しにくいです。
よくある間違いと注意点
- 「上下の余白が効かない」現象
- インライン要素に
margin-topやmargin-bottomを指定しても反映されないことがあります。 - 解決策：
display:inline-block;を指定する。
- インライン要素に
- marginの相殺（collapse）
- ブロック要素を縦に並べると、上下のmarginが「重なって」思ったより広くなる。
- 解決策：親要素に
paddingをつけるか、overflow:hidden;を指定する。
ブロック要素一覧（HTML5以降）
| 要素 | 用途・説明 |
|---|---|
<div> | 汎用のブロック要素 |
<p> | 段落 |
<h1>～<h6> | 見出し（SEO重要） |
<header> | ヘッダー部分 |
<footer> | フッター部分 |
<section> | コンテンツの区切り |
<article> | 独立した記事やコンテンツ |
<aside> | 補足情報（サイドバー等） |
<nav> | ナビゲーション |
<main> | ページの主要部分 |
<form> | 入力フォーム |
<ul> <ol> <li> | リスト |
<table> | 表 |
<figure> | 画像や図表のまとまり |
<blockquote> | 引用 |
<address> | 連絡先情報 |
インライン要素一覧（HTML5以降）
| 要素 | 用途・説明 |
|---|---|
<span> | 部分的な装飾 |
<a> | リンク |
<strong> | 強調（SEOに有効） |
<em> | 斜体による強調 |
<b> | 見た目の太字 |
<i> | 見た目の斜体 |
<u> | 下線 |
<mark> | 蛍光ペン風の強調 |
<time> | 時刻・日付 |
<code> | ソースコード |
<img> | 画像 |
<input> | 入力欄 |
<label> | フォームラベル |
<abbr> | 略語 |
<br> | 改行 |
<small> | 小さな文字 |
<sup> <sub> | 上付き・下付き文字 |
inline-blockという便利な選択肢
「インライン要素に幅や高さをつけたいけど効かない…」というときに役立つのが display:inline-block; です。
特徴
- インライン要素のように横並びにできる
- ブロック要素のように幅や高さを指定できる
<style>
.inline-box {
display:inline-block;
width:120px;
height:50px;
margin:10px;
padding:10px;
border:1px solid #333;
}
</style>
<div class="inline-box">Box1</div>
<div class="inline-box">Box2</div>
<div class="inline-box">Box3</div>
👉 横並びで整列しつつ、margin・padding・width・heightも有効になります。
SEO観点でのまとめ
検索エンジンは「意味」を理解するためにHTMLを解析しています。
<h1>はページのタイトル<article>は記事全体<strong>は強調されたキーワード<nav>はナビゲーションメニュー
👉 正しい要素を使うことで、SEOの評価が高まり、検索順位にも良い影響を与えます。
総まとめ
- ブロック要素はページの構造を作る箱
- インライン要素は文章の一部を装飾する
- marginは外側、paddingは内側の余白
- inline-blockを使えば両者のいいとこ取りが可能
- SEO的にも正しいタグ選びは重要
初心者の方は、まず「divは箱、spanは文字の一部」と覚えるところから始め、少しずつ inline-block → Flexbox → Grid と進むと理解が深まります。
