わかってないとはまりやすいmarginとpaddingの余白の違い

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

CSSのmarginとpaddingの違いについて

marginとpadding WEB制作

CSSのmarginとpaddingの違いをなるべく詳しく説明し、backgroundとborderを使って要素を見える化する方法を紹介。問題解決において原因の見える化は重要で、仕組みと意味を正しく理解できればどっちを使うべきかがわかります

公開日:
最終更新日:

marginとpadding 関連ワード #102
css
margin
padding
  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る

margin padding border を理解する方法

CSSでよく使うプロパティTOP5に入るといっても過言ではないこの3種。

CSSに慣れていないと、混乱しやすい3つです。

なにがどうなっているのかを理解するのによく使っていた方法として、backgroundに色を付ける、ボーダーを適用する、という方法があります。
最近はディベロッパーツールが優秀なのでそっちを使うことの方が多いのですが、覚えておくといいことがあるかもしれないので紹介します。

何もしない状態だとこの状態

<div>に対して以下のCSSを適用したものをサンプルにします。
.sample1{
	margin: 20px;
	padding: 20px;
}
サンプルの状態 色なし

これに背景色(backgound:#ddd;)とborderを適用してみます。

サンプルの状態 色あり線あり

こんな感じで、色と線が付きますよね。
こうすることで、divの影響範囲と、paddingのサイズが見える化されます。

paddingで指定した20pxには色がつき、
marginの20pxには色が付きません。これをまず理解してください。

borderで書かれた線の向こう側20pxがmarginの効くエリアになります。

サンプルはボーダーも背景色もあるので分かりやすいですよね。

ミスを理解するために可視化するということ

もう少し実践的なサンプルを用意します。
わりとよくある、画像 + 見出し + ディスクリプションでそれを並べたデザインです。

画像と見出しの間が広いので、これをもう少し狭くしたいとなったときに、どの要素のmargin or paddingを詰めれば良いかと。

HTMLはこんな感じで組まれてます

<ul class="sample3">
<li>
<a href="http://path">
<img src="画像パス">
<h3>見出し</h3>
<p>ディスクリプション</p>
</a>
</li>

<li>
<a href="http://path">
<img src="画像パス">
<h3>見出し</h3>
<p>ディスクリプション</p>
</a>
</li>
</ul>

CSSはこんな感じ

.sample3{
	display: flex;
}
.sample3 li{
	flex-basis: 50%;
	list-style: none;
	margin: 10px;
}
.sample3 li img{
	width: 100%;
}
.sample3 h3 {
	padding-top: 40px;
}

h3にpadding-top:40pxがかかっているので、あきらかにコイツのせいなんですが、あえてそこは無視しましょう。

h3に色を付けて線を付けてみます。

線と背景色をつけた状態

こんな感じで要素を見える化するとどういう状態になっているかがわかりやすくなります h3と隣接するpにも線と色をつけてみました。

h3の背景色のついた領域の上に空間があるので、paddingを調整すれば間が詰まることがわかります。

その下の p にはボーダーと背景色の間にスペースがないので、paddingが0になっているのがわかります。

paddingをmarginに変えたらどうなるか

h3に指定されているpadding-top:40px を margin-top:40px に変更してみます。

背景色のエリアの上の隙間がなくなり、ボーダーの上に隙間ができました。
画像との距離は40pxで同じですが、指定方法が違うわけですね。

ディベロッパーツールでみるとよくわかる

これをディベロッパーツールで見るとわかりやすく書かれています。

ディベロッパーツール

firefoxのディベロッパーツール

ディベロッパーツールを出して、「インスペクター」で要素を選択し、「レイアウト」というタブをクリックすると上記の図が出てきます。

紫の色がpaddingエリアで黄色の背景がmarginのエリアです。

marginとpaddingの違いを理解するということ

marginはborderの外側、paddingはborderの内側という特性を理解しておけば、余白を設けるときにどっちを指定すればよいのかがわかりますよね。

どちらも同じ余白を取る方法ですが、borderで囲った外側に余白をつくりたいのか、内側に作りたいのかで指定するプロパティが変わります。

どっちでもよければどっち使ってもいいんですけど、余白の意味をちゃんと考えて指定することが大事なわけです。

<a> タグの余白をpaddingで指定するか、marginで指定するかによって、クリッカブルエリアの大きさが変わってきます。

paddingで指定した余白はクリッカブル、marginで指定した余白はクリックできない余白になります。borderの外側の余白だから。

こんな感じで仕組みを理解して使うと、使い方がわかってきます。

問題解決の手段は問題を切り分けること

marginとpaddingのどちらで指定されているか、見える化して確認する方法を紹介しました。

marginはborderの外側、paddingはborderの内側

この仕組みを理解し、要素に色と線を付けて確認すれば、何を調整すればよいかがわかります。

問題を解決するには、現状がどうなっているかを正しく理解して、問題に対してどういう改善方法を行えばよいかを明確にする必要があります。

これ、例題ではCSSを変更して色と線を引きましたが、実際はディベロッパーツールにCSSを書き込めば検証できますので、ディベロッパーツールを正しく使うとこの工数を削減できます。

初心者の方がつまづきやすいmarginとpaddingの違いを解説してみました。

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る

次の記事はこちら

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップ!のレンタルサーバーを使っています

プロフィール詳細はこちら

html 関連記事はこちら すべての WEB制作 記事はこちら

ブログ人気の記事・レビュー

新着記事

カテゴリリスト

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップ!のレンタルサーバーを使っています

プロフィール詳細はこちら

marginとpadding関連・オススメ商品 amazon