閉じる
カテゴリー
もっと見る:HTML&CSSコーディング

HTML&CSSコーディング
paddingとmarginで余白をつくる

余白は、見やすいデザインに不可欠です。ここでは、余白をつくるpaddingプロパティとmarginプロパティについてわかりやすく解説します。

【PR】 配色サイト "Tricolors"

3色ベースの配色見本Tricolors、タップ/クリックで配色パターンを切り替え!

例:ルフィたんじろうウェディングクジャクシベリアンハスキーコスモス など

おすすめ配色見本サイト Tricolors(トリカラーズ) Color Palettes / Color Combinations

padding/marginの違い

paddingは、ボックス(ブロック要素)の枠線から内側のコンテンツまでの距離です。

marginは、ボックスの枠線から外側のその他要素または境界までの距離です。

距離を取ったところは、デザイン上、余白になります。

padding/marginの比較

以下、次の3つのdivタグを例に、paddingとmarginをそれぞれ設定してみます。

なお、bodyタグにはデフォルトで8pxのmarginが設定されていますが、ここではわかりやすいように0にしています。また、divタグには枠線をつけてあります(border: solid 1px black;)。

HTML
<div>今日は晴れでした。</div>
<div>明日は雨が降るかもしれません。</div>
<div>でも明後日は晴れるみたいです。</div>

以下、padding/margin適用前です。3つのボックスが重なっています。

DEMO

padding使用例

CSS
div {
  border: solid 1px black;
  padding: 20px;
}
DEMO

margin使用例

CSS
div {
  border: solid 1px black;
  margin: 20px;
}
DEMO

padding/marginの値の書き方

paddingとmarginの値の書き方は、基本的に同じです。

どちらのプロパティも上記例のように値を一つだけ記述すると四辺(上下左右)の距離を指定できます。

paddingまたはmargin: 上下左右;

また、値を二つ記述すると上下と左右の距離を指定できます。このとき、値と値の間にカンマは入れません。

paddingまたはmargin: 上下 左右;

CSS
div {
  border: solid 1px black;
  padding: 20px 40px;
}
DEMO
CSS
div {
  border: solid 1px black;
  margin: 20px 40px;
}
DEMO

さらに、値を四つ記述すると上、右、下、左の距離を指定できます。上から時計回りに指定します。

paddingまたはmargin: 上 右 下 左;

CSS
div {
  border: solid 1px black;
  padding: 20px 40px 60px 80px;
}
DEMO
CSS
div {
  border: solid 1px black;
  margin: 20px 40px 60px 80px;
}
DEMO

上下marginの相殺

基本的に、上下に隣接する要素に設定されるmarginの重なる部分は値の大きいほうが適用されます。

例えば、上の要素の下部marginが10px、下の要素の上部marginが20pxに設定されている場合、上下の要素の余白は20pxになります(30pxにはなりません)。

このどちらか大きい方のみが適用されることをmarginの相殺(たたみ込み)といいます。

一辺だけを設定するロングハンド

padding/marginを一辺だけ適用させたいときには、ロングハンドプロパティ(通称「ロングハンド」)を使用する方が簡単です。

詳しくは、ショートハンドとロングハンドで解説します。

HTML/CSS一覧