marginとpaddingを使いこなして、思い通りのレイアウトを実現しよう！

2024-04-02

CSSにおけるmarginとpaddingの違い

■ margin

要素の外側に余白を設定します。
他の要素と要素の間隔を調整するために使用されます。
要素の背景色やボーダーの外側に適用されます。
複数の要素が隣接している場合、マージン同士が重なり合うと、その分だけ余白が広くなります。

■ padding

複数の要素が隣接している場合、padding同士は重なり合わず、それぞれ独立して設定されます。

■ まとめ

項目	margin	padding
適用場所	要素の外側	要素の内側
用途	要素間の距離調整	内容と枠線の距離調整
適用範囲	背景色・ボーダーの外側	背景色・ボーダーの内側
重なり	重なり合う	重なり合わない

■ 例

以下の例では、div要素にmarginとpaddingを設定しています。

div {
  margin: 10px;
  padding: 20px;
}

この場合、div要素は他の要素から10px離れ、内容と枠線からは20px離れます。

■ 使い分け

要素間の距離を調整したい場合はmarginを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>marginとpaddingのサンプル</title>
  <style>
    body {
      font-family: sans-serif;
    }
    .container {
      width: 300px;
      margin: 10px auto;
      border: 1px solid #ccc;
      padding: 20px;
    }
    .text {
      margin: 10px;
      padding: 5px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>marginとpaddingのサンプル</h2>
    <p class="text">
      この段落は`margin`と`padding`を使用して調整しています。
    </p>
  </div>
</body>
</html>

このコードを実行すると、以下のようになります。

解説

container要素にはmarginとpaddingを設定しています。
- margin: 10px auto;により、container要素は上下左右に10pxの余白が設定され、画面中央に配置されます。
- padding: 20px;により、container要素の内容と枠線の間には20pxの余白が設定されます。

このサンプルコードを参考に、marginとpaddingを使い分けて、レイアウトを調整してみてください。

marginとpaddingは、それぞれ4方向（top、right、bottom、left）の余白を個別に設定することができます。

/* 上下の余白を20px、左右の余白を10pxに設定 */
margin: 20px 10px;

/* 上の余白を30px、他の3方向の余白を10pxに設定 */
padding: 30px 10px;

ショートハンドプロパティ

以下のショートハンドプロパティを使用して、方向をまとめて設定することができます。

margin-top: 上の余白

/* 上下の余白を20px、左右の余白を10pxに設定 */
margin: 20px 10px;

/* 上下の余白を20px、左右の余白を10pxに設定 */
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;

calc()関数を使用して、余白を動的に計算することができます。

/* 要素の幅の10%を左右の余白に設定 */
margin: 0 calc(10% * var(--width));

/* 要素の高さの2倍を上下の余白に設定 */
padding: calc(2 * var(--height)) 0;

CSS変数を使用して、余白の値を繰り返し利用することができます。

:root {
  --margin: 10px;
  --padding: 20px;
}

.container {
  margin: var(--margin);
  padding: var(--padding);
}

.text {
  margin: var(--margin);
  padding: var(--padding) / 2;
}