CSSのpaddingとmarginとは？違いを簡単に解説

Webページのレイアウトを作成する際、paddingとmarginの違いを正確に理解することが、美しく使いやすいデザインを実現する第一歩となります。以下の2つの違いを押さえておきましょう。

• paddingは要素の内側の余白
• marginは要素の外側の余白

それぞれの役割と使い方を理解することで、思い通りのレイアウト調整ができるようになります。以下では各プロパティについて詳しく解説していきます。

paddingは要素の内側の余白

paddingはボーダーとコンテンツの間に余白を作るプロパティで、要素の内側の空間を調整します。paddingで作成した余白には、要素に指定した背景色や背景画像が適用されます。

.box {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #333;
}

上記のコードでは、ボーダーとコンテンツの間に20pxの余白が作られ、その余白部分にも背景色が表示されます。paddingはボタンやカードなどのデザイン要素で、クリック可能な領域を広げたり、テキストを読みやすくするために使用されます。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

• 「Pythonマスター講座」

  

• 「ChatGPT基礎講座」

  

marginは要素の外側の余白

marginはボーダーの外側に余白を作るプロパティで、要素同士の距離を調整します。marginで作成した余白は常に透明で、背景色や背景画像は適用されません。

.box {
  margin: 30px;
  background-color: #f0f0f0;
  border: 1px solid #333;
}

上記のコードでは、ボーダーの外側に30pxの余白が作られ、その余白部分には背景色が表示されません。marginは見出しと段落の間隔を開けたり、セクション同士の距離を調整するために使用されます。

paddingとmarginは、上下左右を個別に指定することも可能性です。複数の値を1行でまとめて記述する方法を「ショートハンド」と言い、3つの指定方法があります。

• 値を1つ指定する方法
• 値を2つ指定する方法
• 値を4つ指定する方法

それぞれの指定方法によって適用される箇所が異なるため、状況に応じて使い分けることで効率的にコードを記述できます。以下では各指定方法について詳しく解説していきます。

値を1つ指定する方法

値を1つだけ指定すると、上下左右すべてに同じ値が適用されます。すべての方向に同じ余白を設定したい場合に使用します。

.box {
  padding: 20px;
  margin: 15px;
}

上記のコードでは、paddingは上下左右すべてに20pxが適用され、marginは上下左右すべてに15pxが適用されます。コードが簡潔になるため、均等な余白を設定する際に便利です。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

• 「Python基礎・実践研修」

  

• 「オーダーメイドコース」

  

値を2つ指定する方法

値を2つ指定すると、1つ目の値が上下に、2つ目の値が左右に適用されます。上下と左右で異なる余白を設定したい場合に使用します。

.box {
  padding: 30px 15px;
  margin: 20px 10px;
}

上記のコードでは、paddingは上下に30px、左右に15pxが適用され、marginは上下に20px、左右に10pxが適用されます。縦横で異なる余白が必要な場合に効率的に記述できます。

値を4つ指定する方法

値を4つ指定すると、上から時計回りに上・右・下・左の順で適用されます。各方向に異なる余白を設定したい場合に使用します。

.box {
  padding: 10px 20px 15px 5px;
  margin: 5px 15px 10px 20px;
}

上記のコードでは、paddingは上10px、右20px、下15px、左5pxが適用され、marginも同様に各方向に異なる値が適用されます。細かい調整が必要な場合に使用しますが、可読性を考慮して必要最小限の使用にとどめることが推奨されます。

marginには相殺と呼ばれる独特の動作があり、上下に隣り合う要素のmarginが重なると大きい方の値だけが適用される現象です。以下の2つのケースで相殺が発生します。

• 隣接する兄弟要素間の相殺
• 親要素と子要素間の相殺

それぞれのケースで相殺の挙動が異なるため、レイアウトが意図通りにならない原因となることがあります。以下では各ケースについて詳しく解説していきます。

隣接する兄弟要素間の相殺

上下に並ぶ兄弟要素にそれぞれmarginを設定した場合、値が合算されず大きい方のmarginだけが適用されます。相殺はブロックレベル要素の上下方向のmarginでのみ発生し、左右方向では発生しません。

.box1 {
  margin-bottom: 40px;
}

.box2 {
  margin-top: 20px;
}

上記のコードでは、box1の下のmargin40pxとbox2の上のmargin20pxが重なりますが、合計の60pxにはならず、大きい方の40pxだけが要素間の余白として適用されます。この動作により、連続する段落や見出しで一貫した余白を保つことができます。

親要素と子要素間の相殺

親要素と子要素に同じ方向のmarginを設定した場合、borderやpaddingで区切られていなければ相殺が発生します。親要素のborderやpaddingが存在する場合は相殺が起こりません。

.parent {
  margin-top: 10px;
}

.child {
  margin-top: 50px;
}

上記のコードで親要素にborderやpaddingがない場合、親要素と子要素のmargin-topが相殺され、大きい方の50pxが親要素の外側に適用されます。この現象を防ぐには、親要素にborderやpaddingを1px以上設定するか、flexboxやgridなどのレイアウト手法を使用します。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム

• 
  【AWS】認定資格12種類の一覧や難易度、費用などを解説
• 
  Canvaとは？使い方やアカウント登録などを初心者向けに解説
• 
  git configで設定情報を確認・表示する方法
• 
  「Pythonはやめとけ」と言われる理由と学習するメリット
• 
  Ubuntuのversionを確認する方法

ITやプログラミングに関するニュース

• 
  NPO法人札幌チャレンジドが人材確保セミナー開催、発達特性学生の能力値と向き合い方を解説
• 
  SuMPOと日本化学キューエイが共催ウェビナー開催、SPC認証プログラムの普及を目指す
• 
  株式会社ATOMicaが松本市の起業家育成セミナーを運営、松本道場で挑戦できる地域社会を目指す
• 
  株式会社ブライトイノベーションが無料ウェビナー開催、GX推進における補助金活用法を解説
• 
  一般社団法人全日本SEO協会がAIモード対策セミナーを開催、Google検索の変化に対応