かんたんCSS margin, padding, 余白の設定とボーダーとの関係

HTMLのコンテンツに余白を入れる方法です。作業はすべてCSSで行います。

余白は2種類あり役割が違います。それが分かると、余白はとてもかんたんです。

また、ボーダー（枠線）と関係しています。それも合わせてソースコードのサンプルで誰でも分かるように説明します。

余白はmarginとpaddingで、ちがいはborder（枠線）を基準にして

だけです。それだけです。かんたんですね？ くわしい内容をそれぞれ見ていきましょう。

margin - 枠の外の余白

marginはコンテンツの枠の外に余白をつくります。上下左右で隣り合うほかのコンテンツとの距離を決めます。

まずはmargin未指定（デフォルト）から。HTMLとCSSのサンプルです。

<div class="content content-a">コンテンツA</div>
<div class="content content-b">コンテンツB</div>
<div class="content content-c">コンテンツC</div>

.content {
  color: #fff;
  text-align: center;
  max-width: 500px;
  min-height: 100px;
  border: 3px solid #e4ad6d;
}
.content-a {
  background: #7fc2ef;
}
.content-b {
  background: #d685b0;
}
.content-c {
  background: #dbe159;
}

borderで枠線を見やすくしました。HTMLの結果です。

デフォルトはマージンなしなので、コンテンツがつながります。

次はコンテンツBにmarginを指定しましょう。CSSを追加してHTMLを変更します。

.set-margin {
  margin: 50px;
}

<div class="content content-a">コンテンツA</div>
<div class="content content-b set-margin">コンテンツB</div>
<div class="content content-c">コンテンツC</div>

classのset-marginでマージンを設定し、htmlでコンテンツBのクラスに追加します。

マージンは上下左右50pxです。HTMLの結果です。

上下左右でボーダーの外に余白ができました。

マージンは個別にも指定できます。

1つ1つサンプルをつくるのが面倒なので一気に見ます。CSSを追加してHTMLを変更します。

.set-margin-top {
  margin-top: 50px;
}
.set-margin-bottom {
  margin-bottom: 50px;
}
.set-margin-left {
  margin-left: 50px;
}
.set-margin-right {
  margin-right: 50px;
}

<div class="content content-a">コンテンツA</div>
<div class="content content-b set-margin-top">マージン上</div>
<div class="content content-c set-margin-bottom">マージン下</div>
<div class="content content-a set-margin-left">マージン左</div>
<div class="content content-b set-margin-right">マージン右</div>
<div class="content content-c">コンテンツC</div>

HTMLの結果です。

マージンは重なり合う。サイズが大きくなっても慌てない

マージンは隣接するコンテンツのマージンと重なり合います。このとき、コンテンツ間のマージンは大きいほうが優先されます。

サンプルを見ましょう。CSSを追加してHTMLを変更します。

.set-margin-top2 {
  margin-top: 10px;
}
.set-margin-bottom2 {
  margin-bottom: 70px;
}

<div class="content content-a set-margin-bottom2">マージン下（大）</div>
<div class="content content-b set-margin-top2">マージン上（小）</div>

HTMLの結果です。

マージンは大きいほうに合わせて表示されます。

padding - 枠の中の余白

次はボーダーの中の余白です。サンプルを見てみましょう。

CSSはこれまでのをそのまま使いHTMLを変更します。

コンテンツA
<div class="content content-a">
  <div class="content content-b">コンテンツB</div>
</div>

内側の余白を見たいので、コンテンツBをAの中に入れました。まずは未設定を見ます。

コンテンツAは全く見えずコンテンツBが覆いかぶさっています。

ここでコンテンツAにpaddingを指定しましょう。CSSを追加してHTMLを変更します。

.set-padding {
  padding: 20px;
}

コンテンツA
<div class="content content-a set-padding">
  <div class="content content-b">コンテンツB</div>
</div>

classのset-paddingでパディングを設定し、htmlでコンテンツAのクラスに追加します。

パディングは左右上下20pxです。HTMLの結果です。

コンテンツBはA内のpaddingより広がりません。コンテンツAとBのborderの間に余白ができます。

パディングも個別に指定できます。サンプルで一気に見ます。CSSを追加してHTMLを変更します。

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

<div class="content content-a set-padding-top">
  <div class="content content-b" >パディング上</div>
</div>
<div class="content content-c set-padding-bottom">
  <div class="content content-b" >パディング下</div>
</div>
<div class="content content-a set-padding-left">
  <div class="content content-b" >パディング左</div>
</div>
<div class="content content-c set-padding-right">
  <div class="content content-b" >パディング右</div>
</div>

HTMLの結果です。

まとめて指定する方法

今まで、『margin: ??px;』『padding: ??px;』というようにまとめて指定する方法を使ってきました。

このまとめて指定する方法はいくつかあります。

複数個指定する場合は半角スペースで区切ります。