【2026年8月最新】CSSのpaddingとは？使い所と設定方法、marginとの違いを解説

「ボタンの文字がギリギリで窮屈に見える」「marginとpaddingの違いがよく分からない」——CSSでレイアウトを調整し始めたばかりの方が、必ずと言っていいほどぶつかる壁がこのpadding（パディング）の理解です。

paddingは、CSSにおいて要素の「内側」の余白を設定するプロパティです。見た目にも大きく影響するにもかかわらず、marginとの違いや、他のCSSプロパティとの組み合わせで混乱しやすいポイントでもあります。

この記事では、paddingの基本、marginとの違い、設定方法、box-sizingとの関係、実務での活用例までを網羅的に解説します。さらに後半では、「CSSを書く」作業そのものをAIに任せるという選択肢について、AI鬼管理を運営する株式会社GENAIの実例を交えて紹介します。

この記事を読み終える頃には、次のことが明確になっています。

01 BASICS paddingとは — 基本を理解する CSSの「ボックスモデル」の中でpaddingが占める位置

CSSでは、すべての要素（div、p、buttonなど）が「ボックスモデル」と呼ばれる4層構造で扱われます。paddingは、このボックスモデルにおいて「内容（コンテンツ）」と「境界線（ボーダー）」の間の余白を指定するプロパティです。

層（内側から）	役割	例えるなら
content（内容）	テキストや画像など、実際の中身	部屋の中の家具
padding（内側の余白）	内容と境界線の間のスペース	家具と壁の間の空間
border（境界線）	要素の輪郭を示す線	部屋の壁
margin（外側の余白）	要素と、隣の要素との間のスペース	隣の部屋との距離

1-1. なぜpaddingが必要なのか

文字や画像を境界線ギリギリに配置すると、見た目が窮屈になり、読みにくさや圧迫感につながります。paddingを適切に設定することで、「余白による読みやすさ・デザインの余裕」を生み出せます。特にボタンやカードのようなUI要素では、paddingの数値ひとつでプロっぽさが大きく変わることも珍しくありません。

1-2. paddingが適用される要素の範囲

paddingは、div・p・button・table・inputなど、ほぼすべてのHTML要素に適用できます。ただし一部の要素（インライン要素の一部など）では、上下方向のpaddingが見た目上のレイアウトに影響しにくいケースもあり、要素の種類（ブロック要素かインライン要素か）によって挙動が変わる点には注意が必要です。

1-3. HTMLとCSSの役割分担を再確認する

この記事のタイトルにある通り、「HTMLのpadding」という表現がされることもありますが、正確にはpaddingはCSSのプロパティです。HTMLは文章の構造（見出し・段落・リストなど）を定義する言語であり、余白やレイアウトの調整はCSSが担当します。この役割分担を理解しておくと、「HTML側で何を直すべきか」「CSS側で何を直すべきか」の切り分けがスムーズになります。

02 PADDING VS MARGIN paddingとmarginの違い 「内側」か「外側」かという1点を押さえる

paddingとmarginは、どちらも「余白」を作るプロパティですが、境界線（border）を基準にして、内側か外側かという決定的な違いがあります。

項目	padding	margin
位置	境界線の内側（内容と境界線の間）	境界線の外側（要素と要素の間）
背景色の適用範囲	padding部分にも背景色が適用される	margin部分には背景色が適用されない
マイナス値の指定	基本的に不可	可能（要素を意図的に重ねる場合等に使用）
主な用途	要素内部の余白調整（ボタンの内側など）	要素間の距離調整（要素同士の間隔など）

2-1. 背景色が適用されるかどうかで見分ける

paddingとmarginを見分ける最も分かりやすい方法は、「背景色を設定したとき、その余白部分にも色が付くかどうか」です。paddingの範囲には要素の背景色が適用されますが、marginの範囲には適用されません。ブラウザの開発者ツールでボックスモデルを表示すると、この違いを視覚的に確認できます。

.box {
  background-color: #fef2f2;
  padding: 20px;  /* 背景色が適用される範囲 */
  margin: 20px;   /* 背景色が適用されない範囲 */
}

03 HOW TO SET paddingの設定方法 ショートハンド記法と個別指定を使い分ける

3-1. 4辺すべてに同じ値を設定する

最もシンプルな指定方法は、4辺すべてに同じ余白を設定する書き方です。

.box {
  padding: 20px; /* 上下左右すべて20px */
}

3-2. ショートハンド記法（値の数で意味が変わる）

paddingは、指定する値の数によって適用される辺が変わるショートハンド記法に対応しています。値の順序は「上→右→下→左」という時計回りが基本ルールです。

値の数	書き方の例	適用のされ方
1つ	padding: 20px;	上下左右すべてに同じ値
2つ	padding: 20px 10px;	上下に1つ目、左右に2つ目
3つ	padding: 20px 10px 15px;	上、左右、下の順
4つ	padding: 20px 10px 15px 5px;	上、右、下、左の順（時計回り）

3-3. 個別指定（特定の1辺だけ変えたい場合）

特定の1辺だけを調整したい場合は、padding-top、padding-right、padding-bottom、padding-leftを個別に指定します。

.box {
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 15px;
}

04 BOX-SIZING box-sizingとの関係 paddingを設定すると要素の見た目のサイズが変わる理由

paddingを扱ううえで、必ず理解しておきたいのがbox-sizingプロパティとの関係です。CSSの初期設定（box-sizing: content-box）では、widthで指定した幅に、paddingとborderの分が「上乗せ」されるという挙動になります。

/* box-sizing: content-box（初期値）の場合 */
.box {
  width: 200px;
  padding: 20px;
  /* 実際の見た目の幅は 200px + 20px×2 = 240px になる */
}

この挙動を知らずにpaddingを追加すると、「widthは変えていないのに、要素の見た目が大きくなってレイアウトが崩れた」というトラブルにつながります。これを避けるために、多くの実務現場ではbox-sizing: border-boxを指定する運用が一般的です。

/* box-sizing: border-boxの場合 */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  /* widthの200pxの中にpaddingとborderが含まれるため、
     見た目の幅は200pxのまま */
}

4-1. content-boxが初期値である理由

「border-boxの方が便利なら、なぜCSSの初期値はcontent-boxのままなのか」と疑問に思うかもしれません。これは、CSSがWebの黎明期から存在する言語であり、後方互換性（古い仕様で作られたページの表示を壊さないこと）を重視しているためです。border-boxは後から追加された、より扱いやすい選択肢という位置づけになります。

4-2. 発注担当者として確認しておきたいポイント

自社でサイト制作を発注する立場の方であれば、「box-sizingの設定方針」を制作会社に確認しておくと、後々のレイアウト調整がスムーズになります。多くの現代的な制作会社では、プロジェクトの冒頭でborder-boxを一括適用する設計にしていますが、古いテンプレートを流用している場合はcontent-boxのままになっていることもあります。

05 PRACTICAL USE 実務での活用例とよくあるミス ボタン・カード・テーブルでの使い方

5-1. ボタンのデザインでの活用

ボタンのクリックしやすさや見た目の印象は、paddingの数値で大きく変わります。文字と枠のバランスが取れたボタンを作るには、上下と左右で異なる余白を設定するのが定番です。

.button {
  padding: 12px 24px; /* 上下12px、左右24px */
  background-color: #dc2626;
  color: #fff;
  border-radius: 6px;
}

5-2. テーブル（表）での活用

th・td要素にpaddingを設定することで、表の可読性を大きく向上させられます。paddingがない状態のテーブルは、セルの境界線に文字が接してしまい、非常に読みにくくなります。

table td, table th {
  padding: 10px 16px;
  border: 1px solid #ddd;
}

5-3. カードデザインでの活用

商品カードやブログのサムネイルカードのように、複数の要素をまとめた「カード」型のデザインでも、paddingは重要な役割を果たします。カード内部のテキストが枠ギリギリまで詰まっていると、窮屈で読みにくい印象を与えてしまいます。

5-4. レスポンシブ対応でのpadding調整

PCでは適切に見えるpaddingの数値も、スマートフォンの狭い画面幅ではコンテンツを圧迫してしまうことがあります。メディアクエリを使い、画面幅に応じてpaddingの値を小さくする調整が、実務ではよく行われます。

.card {
  padding: 24px;
}

@media (max-width: 600px) {
  .card {
    padding: 16px; /* スマホでは余白を少し狭める */
  }
}

特にスマートフォンでは画面の横幅自体が限られているため、PCと同じpadding値をそのまま使うと、肝心のコンテンツ領域が極端に狭くなってしまうことがあります。画面幅ごとにpaddingを調整する習慣をつけることで、どのデバイスでも読みやすいレイアウトを維持できます。

06 BEYOND CSS 【独自】「数値を調整する」から「AIに意図を伝える」時代へ paddingの数値をゼロから決めなくても、レイアウト調整が完結する時代

ここまで、paddingの仕組みと調整方法を解説してきました。実務でCSSを書くエンジニア・デザイナーにとって、この理解は今も必須です。一方で、「ボタンの余白が窮屈に見えるのを直したいだけなのに、CSSの数値をどう調整すればいいか分からない」という経営者・広報担当の方にとっては、もう1つの選択肢が現実的になっています。それが、AIコーディングエージェントに直接依頼する方法です。

6-1. 【GENAI独自データ】LPのpadding調整をAIに任せている実例

弊社（株式会社GENAI）では、AIコーディングエージェント「Claude Code」をMax 20xプラン（月額$200・約30,000円）で契約し、LPやブログ記事のボタン・カードデザインの余白調整を、エンジニアやデザイナーを都度アサインすることなく、その場で完結させています。

作業内容	従来（自分でCSSを書く）	AIエージェント（Claude Code）
ボタンの余白調整	padding値・box-sizingの理解が必要	「もう少しゆったりさせて」と伝えるだけ
カードデザインの調整	複数プロパティのバランス調整が必要	スクリーンショットを見せて依頼
作業にかかる時間	調査・実装・確認で数十分	数分程度で複数案が出てくる
必要な知識	ボックスモデルの理解が前提	日本語で状況を説明できれば十分

6-2. 「仕組みを理解する」ことの価値は変わらない

AIエージェントに調整を任せられるようになったとしても、この記事で解説したボックスモデルやbox-sizingの理解が不要になるわけではありません。AIが提示した修正案が意図と合っているかを判断するための「最低限の目」として、こうした知識は引き続き役立ちます。「なぜ余白を広げただけなのに、要素全体が大きくなったのか」を理解できれば、AIとのやり取りもより的確になります。

07 GETTING STARTED 【独自】非エンジニアがAIで余白調整をする3ステップ CSSのプロパティ名や数値を覚える必要はない

「CSSは分からないが、自社のLPやブログの余白を整えたい」という方に向けて、AIエージェントを使って調整するまでの3ステップを紹介します。

7-1. ステップ1：気になる箇所をそのまま見せる

「このボタンが窮屈に見える」「このカードの文字が枠にくっつきすぎている」というように、見たまま・感じたままを伝えるだけで、AIエージェントはpaddingを含む該当のCSSプロパティを特定してくれます。

7-2. ステップ2：理想の印象を言葉で伝える

「もう少しゆったりさせたい」「高級感を出したい」「コンパクトにまとめたい」といった印象ベースの表現でも、AIエージェントは適切なpadding値の候補を提案してくれます。数値そのものを指定できなくても問題ありません。

7-3. ステップ3：他の要素とのバランスも確認する

1つの要素のpaddingを変えると、周囲の要素とのバランスが崩れることもあります。修正後は、その要素単体だけでなく、ページ全体を見渡してバランスが取れているかを確認する習慣を持つと安心です。

08 CONCLUSION まとめ ── paddingの基本と、AIに任せる選択肢 仕組みを理解しつつ、必要ならAIにも頼る

この記事では、paddingの基本、marginとの違い、設定方法、box-sizingとの関係、実務での活用例、そしてAIにCSS調整を任せる時代の考え方までを整理しました。最後にポイントを振り返ります。

paddingの仕組みを理解して自分で調整できるようになることも、AIエージェントに意図を伝えて任せることも、どちらも有効な選択肢です。「今すぐ直したいだけ」なら後者、「継続的にサイト運営に関わる」なら前者の理解も深めておく、という使い分けをおすすめします。

特にpaddingとmarginの違い、box-sizingの挙動は、CSSのレイアウトを理解するうえでの土台となる知識です。この記事で紹介した内容を一度実際に手を動かして試してみることで、次に似たようなレイアウト崩れに遭遇したときの対応スピードが大きく変わるはずです。仕組みを知ったうえでAIに任せるのと、何も分からないまま任せるのとでは、最終的な仕上がりの精度にも差が出てきます。

ぜひこの記事を参考に、自社サイトのボタンやカードの余白を見直してみてください。

CSSを覚える前に、AIに直接頼んでみませんか

自社サイトの余白を整えたいなら、CSSを学ぶ前にAIエージェントで直せないか試す価値があります。
AI鬼管理では、Claude Codeを使ったサイト改善・業務自動化を無料相談で伴走支援しています。

ここから先の進め方は、大きく2つあります。

自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。

覚えるより任せたい方は、AIBPO by AI鬼管理でこの記事のような定型業務を丸ごと預ける道があります。総額はいまの業務コストの70〜80%が目安、月額基本料は0円です。

どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。

よくある質問

Q. paddingとmarginはどう使い分ければいいですか？

A. 要素の内側（枠の中）に余白を作りたい場合はpadding、要素と要素の間（枠の外）に距離を作りたい場合はmarginを使います。背景色を設定したときに色が付く範囲がpadding、付かない範囲がmarginと覚えると区別しやすくなります。

Q. paddingにマイナスの値は指定できますか？

A. 基本的に指定できません。paddingは要素の内側の余白のため、マイナス値という概念自体が成立しません。要素を意図的に重ねたい場合はmarginのマイナス値やpositionプロパティを使用します。

Q. なぜpaddingを追加すると要素が大きくなってしまうのですか？

A. CSSの初期設定（box-sizing: content-box）では、widthで指定した幅にpaddingとborderの分が上乗せされる仕様になっているためです。box-sizing: border-boxを指定すると、widthの中にpaddingが含まれるようになり、この問題を回避できます。

Q. ショートハンド記法の値の順序を忘れてしまいます。覚え方はありますか？

A. 「上・右・下・左」の時計回りは、時計の12時から時計回りに進む順番と同じです。「12時（上）→3時（右）→6時（下）→9時（左）」とイメージすると覚えやすくなります。

Q. ボタンのpaddingはどれくらいの数値が適切ですか？

A. 目安として上下12〜16px、左右20〜32px程度が読みやすいバランスとされていますが、フォントサイズやデザインの方向性によって最適値は変わります。実際の見た目を確認しながら微調整することが基本です。

Q. CSSが分からなくてもAIにpadding調整を頼めますか？

A. 頼めます。Claude CodeのようなAIコーディングエージェントは、「このボタンの余白を広げたい」といった日本語の説明から該当箇所とCSSプロパティを特定し、修正案を提示してくれます。数値やプロパティ名を覚えている必要はありません。

Q. paddingとborderの順序は変えられますか？

A. ボックスモデルにおける「内容→padding→border→margin」という層の順序自体は固定で、CSSで入れ替えることはできません。ただし、border-radiusで角を丸めたり、box-shadowで影を付けたりすることで、見た目の印象を調整することは可能です。

AIAI鬼管理

AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。