CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのpaddingとmarginの違いを徹底解説！ボックスモデルの基本と使い分け方

HTMLとCSSを使ったマークアップを学び始めたばかりの頃、ボックスモデルにおけるmargin（マージン）とpadding（パディング）の違いを理解するのに苦労した経験はありませんか？多くの初心者がつまずくポイントですが、考え方さえつかめば簡単です。この記事では、両者を直感的に区別できるようになるためのコツを解説します。

CSSボックスモデルのおさらい

marginとpaddingの違いを語る前に、まずCSSボックスモデルの仕組みを確認しておきましょう。ボックスモデルとは、Webサイトの各コンポーネントを格納する「容器」のことです。これを理解するのに最も分かりやすいのが、「額縁に入った絵」にたとえる方法です。

CSSのpaddingとmarginの違いを徹底解説！ボックスモデルの基本と使い分け方
  • content（コンテンツ）：絵そのもの。コンテナに入れたい中身のことです。
  • padding（パディング）：絵の周囲に敷かれるマット。額装店でいうパスパルトゥーに相当し、マットのぶんだけ額縁が大きくなります。
  • border（ボーダー）：コンテンツとpaddingを収める額縁そのものです。
  • margin（マージン）：壁（ビューポート）に掛けられた隣接する額縁同士の間隔です。

額装店での作業にたとえると、paddingは絵の周りに敷くマットに相当します。マットを追加するとより大きな額縁が必要になるように、CSSでpaddingを指定するとコンテンツボックスが外側へ押し出され、コンテナ全体が大きくなります。つまり、paddingとは「コンテンツとボーダーの間の余白」のことです。

続いてborderは、コンテンツとpaddingを包み込む額縁そのものです。そしてmarginは、ビューポート（壁）上で隣接する要素（額縁）同士の間にあるスペースを指します。

marginとpaddingはどちらを使うべき？

ここで「marginとpaddingはそれぞれどんな場面で使うべきか？」という疑問が浮かびます。

答えには多少主観が絡みますが、一般的には次のように使い分けるのが良いとされています。

  • margin：ページ上の他の要素との位置関係や間隔を調整したいときに使う
  • padding：コンテンツそのものの周囲の余白を広げたいときに使う

marginとpaddingの基本的な設定方法

まずは、背景色・コンテンツ・ボーダーを持つ2つのボックスを用意した基本のコードを見てみましょう。

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Margin vs Padding</title>
   </head>
   <style>
       body {
           background: darkslategray;
           width: 100%;
           height: 100vh;
           max-width: 800px;
           display: flex;
           margin: 0 auto;
           justify-content: space-evenly;
           align-items: center;
       }
       #star-wars {
           background: ivory;
           border: 20px solid cyan;
       }
       #lotr {
           background: ivory;
           border: 20px solid green;
       }
   </style>
   <body>
       <div id="star-wars">
           <h3>Star Wars Chars</h3>
           <div>
               <p>Hans Solo</p>
               <p>Luke Skywalker</p>
               <p>Obi Wan Kenobi</p>
               <p>Chewbacca</p>
               <p>R2D2</p>
               <p>C3PO</p>
           </div>
       </div>
       <div id="lotr">
           <h3>Lord of the Rings Chars</h3>
           <div>
               <p>Bilbo</p>
               <p>Gandalf</p>
               <p>Frodo</p>
               <p>Sam</p>
               <p>Legolas</p>
               <p>Aragorn</p>
           </div>
       </div>
   </body>
</html>

ここで、各ボックスの4辺ごとに異なるpaddingとmarginを設定したい場面を想像してください。<style>タグ内で、次のように各辺に個別のサイズを指定できます。

#star-wars {
    background: ivory;
    border: 20px solid cyan;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-left: 5px;
    margin-right: 25px;
    padding-top: 20px;
    padding-right: 25px;
    padding-bottom: 35px;
    padding-left: 45px;
}
#lotr {
    background: ivory;
    border: 20px solid green;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-left: 5px;
    margin-right: 25px;
    padding-top: 20px;
    padding-right: 25px;
    padding-bottom: 35px;
    padding-left: 45px;
}

とはいえ、毎回4行ずつ書くのは面倒ですよね。そこで便利なのがショートハンド（省略記法）です。margin: 10px 25px 30px 5px;のように書くと、値はTRBL（Top・Right・Bottom・Left＝上・右・下・左）の順に適用されます。この順序はmarginやpaddingだけでなく、ボックスの四辺を指定するほぼすべてのショートハンドプロパティに共通するルールです。

また、実際の開発では「上下は同じ値、左右も同じ値」というケースがよくあります。その場合は、さらに短く書けます。

#star-wars {
    background: ivory;
    border: 20px solid cyan;
    margin: 20px 30px;
    padding: 30px 20px;
}
#lotr {
    background: ivory;
    border: 20px solid green;
    margin: 20px 30px;
    padding: 30px 20px;
}

最初の数値が上下のmargin/padding、2番目の数値が左右のmargin/paddingになります。

さらに、4辺すべて同じ値でよければ、padding: 30px;やmargin: 30px;のように値を1つ指定するだけで済みます。

まとめ

この記事では、ボックスモデルの仕組みと、marginとpaddingの違いについて解説しました。押さえておきたいポイントは次の2つです。

  • paddingはボーダーの内側の余白を扱う
  • marginはボーダーの外側の余白を扱う

コードエディタで実際にさまざまな値を試しながら触ってみてください。繰り返し練習すれば、marginとpaddingを自由自在に操れるようになるのも時間の問題です。

  1. CSSのmarginプロパティを使った要素の中央揃え方法を徹底解説

    CSSのmarginプロパティを使用すると、ブロックレベル要素を水平方向に中央揃えできます。ただし、中央揃えを機能させるには、対象要素のwidthプロパティで幅を設定しておく必要があります。それでは、CSSのmarginプロパティを使って要素を中央揃えする具体的な例を見ていきましょう。marginのauto値で中央揃えが機能する仕組みmargin: 10px auto;のように左右のマージンにautoを指定すると、利用可能な余白が左右に均等に分配され、要素が親要素の中央に配置されます。このテクニックが有効なのは、要素に明示的な幅が指定されている場合のみです。幅が未指定のブロックレベル要素は、デ

  2. CSSのmarginプロパティとは？基本構文から実践的な使い方まで解説

    CSSのmarginプロパティとは CSSのmarginプロパティは、margin-top・margin-right・margin-bottom・margin-leftの4つのプロパティをまとめて指定できるショートハンド（一括指定）プロパティです。要素の外側に余白を設けることで、要素同士の間隔やページ端との距離を自由に調整できます。もちろん、各辺ごとに個別のマージンを設定することも可能です。 値の指定ルール marginプロパティでは、指定する値の数によって適用される方向が変わります。 値が1つ：上下左右すべてに同じ値が適用される 値が2つ：1つ目が「上下」、2つ目が「左右」に適用される