メインコンテンツへ移動するサイト内検索へ移動する

余白

margin

要素の外側の余白を指定する

valuedescription
4px上下左右の margin を指定する
4px 6px上下、左右の margin をそれぞれ指定する
4px 6px 8px 12px上、右、下、左の margin をそれぞれ指定する

Demo

margin 0px
margin 0px
margin 0px
margin 0px
margin 12px
margin 0px
margin 0px
margin 24px
margin 0px
<div class="wrapper">
  <div class="column">
    <div class="box ">
      margin 0px
    </div>
    <div class="box box-target-1">
      margin 0px
    </div>
    <div class="box">
      margin 0px
    </div>
  </div>
  <div class="column">
    <div class="box">
      margin 0px
    </div>
    <div class="box box-target-2">
      margin 12px
    </div>
    <div class="box">
      margin 0px
    </div>
  </div>
  <div class="column">
    <div class="box">
      margin 0px
    </div>
    <div class="box box-target-3">
      margin 24px
    </div>
    <div class="box">
      margin 0px
    </div>
  </div>
</div>

.box-target-1 {
  margin: 0px;
}
.box-target-2 {
  margin: 12px;
}
.box-target-3 {
  margin: 24px;
}

.wrapper {
  display: flex;
  align-items: flex-start;
}
.column {
  flex: 1;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.08) 7px,
    transparent 0,
    transparent 14px
  );
}
.column + .column {
  margin-left: 48px;
}
.box {
  background: rgb(2, 132, 199);
  padding: 8px 12px;
  text-align: center;
  font-family: monospace;
}
.box:nth-child(2) {
  background: rgb(219, 155, 16);
}

概要

要素の外側の余白を指定します。ここでいう外側とは、枠線（border）の外側を指します。 paddingとの使い分けについては余白のスタイリングをご覧ください。

指定する値

valuedescription
4px1 つの値が指定された場合、上下左右全てに同じ大きさの margin を設定します
4px 6px2 つの値が指定された場合、1 つ目の値が上下、2 つ目の値が左右の margin に設定されます
4px 6px 2px 8px4 つの値が指定された場合、順に上、右、下、左の margin に設定されます（時計回りの順です）

margin を個別に指定する

margin を個別に指定するには、margin-top, margin-right, margin-bottom, margin-leftを利用します。

.box {
  margin-top: 4px;
  margin-right: 8px;
  margin-bottom: 12px;
  margin-left: 16px;
}

/* 以下と等価 */
.box {
  margin: 4px 8px 12px 16px;
}

margin の相殺

隣あったブロックレベル要素が持つ margin が接するとき、margin 同士が相殺されます。Flex レイアウトを利用する場合には相殺は発生しません。

以下の例では、青色のブロックの上下に20pxのマージンを設定しています。Flex レイアウトの場合は要素間の距離が20px + 20px = 40pxであるのに対し、デフォルトの場合は相殺し合うため20pxとなります。

デフォルト

margin: 20px 0;
margin: 20px 0;
margin: 20px 0;

Flexレイアウト

margin: 20px 0;
margin: 20px 0;
margin: 20px 0;

また以下の例では、上部に 20px、下部に 10px の margin を設定しています。 Flex レイアウトの場合は20px + 10px = 30pxの間隔になりますが、デフォルトの場合は 10px が打ち消され、20px の間隔となります。

デフォルト

margin: 20px 0px 10px 0px;
margin: 20px 0px 10px 0px;
margin: 20px 0px 10px 0px;

Flexレイアウト

margin: 20px 0px 10px 0px;
margin: 20px 0px 10px 0px;
margin: 20px 0px 10px 0px;

応用

上下左右中央揃え

上下、または左右のmarginにautoを指定することで、中央揃えを実現することができます。現在、中央揃えを行う場合は Flex レイアウトを利用する場合が多いです。

default
margin-right: auto;
margin: 0 auto;
margin-left: auto;

可能な限り余白を空ける

こちらもautoを利用したテクニックです。Flex レイアウトの横並びの中のある要素にautoを適用することで、可能な限り余白を大きく取ることができます。

このデモでは、検索ボックスにmargin-right: auto;を適用することで、検索ボックスとログインボタンの間の余白を広げています。 同様のデザインは、ログインボタンにmargin-left: auto;を適用しても実現できます。

CSS CheetBook

<div class="header">
  <div class="logo">
    <p>CSS CheetBook</p>
  </div>
  <input class="search" type="text" placeholder="🔍 検索" />
  <button class="login">ログイン</button>
</div>

.header {
  display: flex;
  width: 100%;
  background: rgb(70, 160, 199);
  color: white;
  padding: 12px 16px;
  border-radius: 4px;
}

.logo {
  margin-right: 12px;
}

.logo > p {
  color: white;
}

.search {
  /* 右側の余白を可能な限り広げる */
  margin-right: auto;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  color: rgb(51, 51, 51);
  padding: 0 8px;
}

.login {
  border: 1px solid white;
  border-radius: 4px;
  font-size: 14px;
  padding: 2px 8px;
}

関連

参照