padding と margin の使い分けは？

中身と枠線の間を空けたいなら padding、要素同士の距離を空けたいなら margin です。

padding を増やすと要素が大きくなるのはなぜ？

既定の box-sizing: content-box では width/height は中身のサイズで、padding は外側に足されるためです。

padding-top: 10% の % は何を基準に計算されますか？

上下方向も含めて、親要素の幅（width）を基準に計算されます。

width: 100% と padding で横スクロールが出るのはなぜ？

content-box だと 100% の幅に padding が足され、見た目の箱が親幅を超える可能性があるためです。

リンクを押しやすくするにはどうする？

display: inline-block にしてから padding を付け、当たり判定と見た目を一緒に広げます。

CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

Sets the inner spacing between an element’s content and its border.

padding

padding は、ボックスの「内側の余白」を数値で決めて、読みやすさ・押しやすさ・レイアウトの安定を作るためのCSSです。

Table Of Contents

このページでできるようになること

内側の余白（コンテンツと枠線の間）を、上下左右で思いどおりに指定できる
ショートハンド（padding: 10px 20px; など）を読み間違えずに書ける
% 指定が「親要素の幅」を基準に計算される理由を説明できる
width と padding で崩れる事故を、box-sizing で最短修正できる
リンクやボタンの「クリックできる領域／タップ領域」を padding で安全に広げられる
DevTools の Box Model で、どこが増えているかを即確認できる

まずは直感：padding って何？

padding は、要素の「コンテンツの外側〜枠線の内側」までのすき間（内側の余白）を作るプロパティです。

文章の読みやすさ、カードの余白、ボタンの押しやすさなど“中身の周りの空気感”を決めます。

外側の余白（要素同士の距離）を作るのは margin で、役割が違います。

最小デモ：まず動かす

枠線を付けた箱に、padding の有無で「中身と枠の距離」が変わるのを体感します。

padding: 0;（内側の余白なし）

padding: 16px;（内側に余白が入る）

padding: 8px 24px;（上下8px、左右24px）

HTML

<p class="padDemo pad0">padding: 0;（内側の余白なし）</p>
<p class="padDemo pad16">padding: 16px;（内側に余白が入る）</p>
<p class="padDemo padMix">padding: 8px 24px;（上下8px、左右24px）</p>

CSS

.padDemo {
    border: 2px solid #333;
    background: #f7f7f7;
}

.pad0 {
    padding: 0;
}

.pad16 {
    padding: 16px;
}

.padMix {
    padding: 8px 24px; /* 上下8px、左右24px */
}

基本の書き方（最短の型）

実務では外部CSS（共通CSSやページCSS）に書くのが基本で、インライン指定は例外として扱います。

CSS

/* 1値：上下左右すべて */
.card {
    padding: 16px;
}

/* 2値：上下 / 左右 */
.button {
    padding: 8px 16px;
}

/* 4値：上 右 下 左（時計回り） */
.notice {
    padding: 8px 12px 16px 12px;
}

実務メモ：余白の“理由”を残すため、コンポーネント（.card など）の役割に寄せたクラスで書くと保守しやすくなります。

正確な定義（仕様に沿った説明）

padding は、ボックスモデルにおける「パディング領域（padding area）」の太さを指定します。

padding は多くの要素に適用できますが、display プロパティで table-row や table-column などの表関連の表示型にした要素には適用されないものがあります。また、インライン要素では上下の padding が行ボックスの見え方とズレて感じられることがあります。

padding は背景（background）が塗られる領域にも関係します（既定ではパディング領域まで背景が広がります）。

初期値: 0
適用対象: 多くの要素に適用される（ただし display: table-row; / display: table-column; など、表関連の表示型にした要素には適用されないものがある）
継承: なし
計算値: 長さ（px など）または割合（%）
アニメーションの種類: 長さ（length）として

補足：table-row や table-column は HTML の要素名ではなく、display プロパティに指定する値です。

指定できる値（まず覚える）

長さ（length）: px / em / rem など。最初は px で再現し、全体設計に合わせて rem に寄せるのが安全です。
割合（percentage）: %。重要：上下（padding-top/padding-bottom）も含め、基準は「親要素の幅」になります。
0: 単位を付けない 0 は有効です（0px と同じ扱い）。

負の値は指定できません（padding: -10px; は無効です）。

仕様として押さえるポイント（ここで事故を防ぐ）

ショートハンドの読み方（1〜4値）

padding はショートハンドで、値の個数によって割り当てが変わります。

1値: padding: 10px; → 上右下左すべて 10px
2値: padding: 10px 20px; → 上下 10px、左右 20px
3値: padding: 10px 20px 30px; → 上 10px、左右 20px、下 30px
4値: padding: 10px 20px 30px 40px; → 上 10px、右 20px、下 30px、左 40px

ロングハンド（個別指定）との関係

padding は padding-top / padding-right / padding-bottom / padding-left のまとめ書きです。

ロングハンド指定（上4px 右24px 下16px 左12px）

CSS

.padLonghand {
    padding-top: 4px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 12px;
}

`%` の基準は「親要素の幅」

上下の padding でも、% は親要素の width を基準に計算されます（高さ基準ではありません）。

padding: 10%;

親の幅（この枠）に対して10%が上下左右に入ります。

HTML

<div class="padPercentWrap">
    <p class="padDemo padPercent">padding: 10%;</p>
</div>

CSS

.padPercentWrap {
    width: 260px;
    border: 2px dashed #666;
    padding: 12px;
}

.padPercent {
    padding: 10%;
    border: 2px solid #333;
}

`width` と合わせるとサイズが増える（ボックスモデル）

box-sizing: content-box（既定）では、width はコンテンツ幅で、padding は外側に足されます。つまり“見た目の箱”が大きくなります。

content-box：width 220px ＋ padding 24px

border-box：width 220px の中に padding 24px

CSS

.sizeBox {
    width: 220px;
    padding: 24px;
    border: 2px solid #333;
}

.contentBox {
    box-sizing: content-box; /* 既定 */
}

.borderBox {
    box-sizing: border-box; /* padding込みでwidthに収める */
}

落とし穴：width: 100% の要素に左右 padding を足すと横スクロールが出ることがあります。まず box-sizing: border-box を疑います。

よくある勘違い・混同ポイント

padding: 内側の余白（コンテンツと枠線の間）を増やします。クリックできる領域も広がります。
margin: 外側の余白（要素同士の距離）を増やします。クリックできる領域は広がりません。
gap: フレックス/グリッドの子要素同士の“間隔”を作ります。外側や内側の余白ではありません。
line-height: 行の高さ。文章の見た目を整えますが、ボックスの内側余白とは別です。
box-sizing: width/height に padding を含めるかどうかのルールです。padding 自体を増減するものではありません。

インライン要素の上下方向は“見た目通りに”動かないことがある

span のようなインライン要素に padding を付けると、左右は分かりやすい一方で、上下は行ボックスの都合で見た目が想像とズレることがあります。

文章の中でインラインにpadding を付けた例。

実務でよくある使用例（制作会社の現場）

カードの読みやすさを作る

CSS

.card {
    padding: 16px;
}

枠線や背景があるパネルは、内側に余白がないと“詰まって見える”ので、まず padding を入れて可読性を上げます。

リンク／ボタンのタップ領域を広げる

padding で押しやすいリンク小さすぎる

CSS

.tapTarget {
    display: inline-block;
    padding: 10px 14px;
}

/* 悪い例：小さすぎて押しにくい */
.tapTargetSmall {
    padding: 2px 4px;
}

見た目を変えずに“押せる範囲”を広げたいときは padding が安全です（margin では当たり判定は広がりません）。

フォームの入力欄を触りやすくする

CSS

input,
textarea,
select {
    padding: 8px 10px;
}

入力欄は padding で内側を確保すると、文字が枠に近づかず読みやすくなり、タップもしやすくなります。

実務で起きがちな事故と回避策（効かない／崩れるを最短で潰す）

まず DevTools の Box Model を見る

Elements で対象を選択 → Computed で Box Model を確認（margin/border/padding/content のどこが増えているか）
Styles で padding の宣言元（どのCSSが効いているか）を確認する
width とセットで崩れているなら、box-sizing の最終値も確認する

よくある症状と原因候補

横スクロールが出た（はみ出す）: 原因候補：width: 100% に左右 padding を足している（content-box）。; 確認：Computed の box-sizing と Box Model。; 解決：box-sizing: border-box を検討。
高さが揃わない／思ったより大きい: 原因候補：height に padding が足されている（content-box）。; 確認：Box Model。; 解決：box-sizing: border-box か、padding 前提で高さ設計をしない。
クリックできる領域が小さいまま: 原因候補：リンクの padding は効いていても、インライン要素のままだと行内で見た目や押しやすさの印象が不安定になることがある。; 確認：要素の表示形式（display）と実際のクリック範囲。; 解決：ボタン風に扱うなら display: inline-block を使う。
インラインの上下がズレる: 原因候補：行ボックスの都合。; 確認：対象がインラインかどうか。; 解決：必要なら display: inline-block にする、またはブロック要素で包む。
指定したはずの padding が効かない: 原因候補：別ルールに上書きされている／ショートハンドで意図せず上書き。; 確認：Styles で勝っているルール。; 解決：ロングハンドで部分上書きするか、記述順と詳細度を調整。

ショートハンドで意図せず消すパターン

例えば padding-left を個別に書いたあとに padding を書くと、4方向すべてが上書きされます（逆順なら部分上書きになります）。

CSS

/* 悪い例：最後のpaddingで left も上書きされる */
.box {
    padding-left: 32px;
    padding: 12px; /* left も 12px になる */
}

/* 良い例：最後に必要な方向だけを上書きする */
.box {
    padding: 12px;
    padding-left: 32px;
}

アクセシビリティ／UX観点での注意

リンクやボタンは padding でタップ領域を確保し、押し間違いを減らす（小さすぎるUIは操作ミスにつながる）
本文やカードは padding を入れて“詰まり”を減らし、読み飛ばしや誤読を防ぐ
背景色付きのボタンは、padding で当たり判定も背景領域も一緒に広がるため、見た目と操作のズレが起きにくい

試験（Webクリエイター能力認定試験）で得点できる整理

用語ミニ辞典（短く）

ボックスモデル（box model）: 要素の大きさを「content（中身）＋padding（内側余白）＋border（枠線）＋margin（外側余白）」で考える仕組み。
ショートハンド（shorthand）: 複数方向の指定を1行でまとめる書き方。padding は1〜4値で割り当てが変わります。
詳細度（specificity）: 同じ要素に複数ルールが当たったとき、どれが勝つかの強さ。基本は「詳細度 → 後勝ち」。
計算値（computed value）: % などを含む指定が、ルールに沿って解釈された値。
使用値（used value）: 実際の描画に使われる最終値。% の基準などがここで確定します。

ひっかけポイント（短く）

padding: 10px 20px; は「上右下左」→ ×（上下10px、左右20px）
padding-top: 10%; の基準は親の高さ → ×（親の幅）
padding は負の値が使える → ×（無効）
margin を増やすとクリック領域も広がる → ×（広がるのは主に padding）

ミニ確認（判断する形）

Q1. padding: 8px 16px; は、どの方向にいくつ入る？: A. 上下が 8px、左右が 16px です。
Q2. .box { width: 100%; padding: 20px; } で横スクロールが出た。最短の原因と修正は？: A. 既定の box-sizing: content-box で幅に padding が足され、100%を超える可能性があります。box-sizing: border-box を検討します。
Q3. padding-top: 10%; の % は何を基準に計算される？: A. 親要素の幅（width）です。
Q4. 次のどちらが「押せる範囲」を広げる？ margin / padding: A. 基本は padding です。margin は外側の空きで、当たり判定は広がりません。
Q5. padding-left を指定したのに消えた。直後に padding を書いた。何が起きた？: A. ショートハンドの padding が4方向すべてを上書きし、padding-left も置き換えられました。順序を入れ替えるか、ロングハンドで部分上書きします。

よくある質問（FAQ）

padding と margin の使い分けは？: 中身と枠の間を空けたいなら padding、要素同士の距離を空けたいなら margin です。押せる領域を広げたいときは padding が基本です。
padding を増やしたら要素が大きくなったのはなぜ？: 既定の box-sizing: content-box では、width/height は中身のサイズで、padding は外側に足されるためです。box-sizing: border-box を検討します。
padding-top: 10% が思ったより大きい: % は親の幅を基準に計算されます。高さ基準にしたいなら別設計（例：固定値、レイアウトの作り直し）を検討します。
リンクの padding が効いているのに押しやすくならない: リンクがインラインのままだと当たり判定が文字の周りに寄ることがあります。display: inline-block にしてから padding を付けます。
padding の単位は何を使うのが安全？: 最初は px で再現し、全体の文字サイズ設計が固まったら rem に寄せると一貫性を作りやすいです。

よくあるエラー／症状早見表

症状：横スクロールが出る: 原因候補：width: 100% ＋左右 padding（content-box）。確認：Computed の box-sizing と Box Model。解決：box-sizing: border-box を検討。
症状：高さが揃わない: 原因候補：height に padding が足されている。確認：Box Model。解決：border-box か、高さ固定を避ける。
症状：padding-left が消える: 原因候補：後から書いた padding が4方向を上書き。確認：Styles の宣言順。解決：必要方向のロングハンドを最後に書く。
症状：リンクが押しにくい: 原因候補：インラインのまま。確認：Computed の display。解決：inline-block にして padding を付ける。

まとめ：迷ったときの判断軸

中身と枠の距離を作りたい → padding
要素同士の距離を作りたい → margin
押しやすくしたい（当たり判定も広げたい） → display: inline-block ＋ padding
width: 100% で横スクロール → box-sizing: border-box を疑う
% の上下 padding が不思議 → 基準は親の幅
迷ったら DevTools → Computed の Box Model でどこが増えたかを見る

CSS