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

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

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

#102 marginとpadding

WEB制作

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

公開日:
最終更新日:

商品リンクにアフィリエイト広告を利用しています

サイトマップサイトマップ

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の違いを解説してみました。

記事内で紹介している商品リスト
(価格はAmazon参考価格)

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

2,728円(税込)

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

2,948円(税込)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

HTML5 & CSS3 デザインレシピ集

3,025円(税込)

HTML5 & CSS3 デザインレシピ集

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

2,838円(税込)

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

HTML&CSSとWebデザインが 1冊できちんと身につく本

2,300円(税込)

HTML&CSSとWebデザインが 1冊できちんと身につく本

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

2,486円(税込)

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

2,640円(税込)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

2,454円(税込)

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

1,958円(税込)

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

イラスト図解式 この一冊で全部わかるWeb技術の基本

1,848円(税込)

イラスト図解式 この一冊で全部わかるWeb技術の基本

marginとpaddingの関連ページ

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

SVG背景

CSSとSVGを使った三角形背景の作り方

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

tableデザイン

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

WEB言語紹介

WEB制作をささえるHTML・CSS・Javascript・PHP

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

URLの疑似静的化

URLの疑似静的化 動的URLを静的URLにする方法

htacessを使いhtmlファイルが存在しない静的URLを生成する方法と、仕事で使った疑似URLの活用方法の紹介です。

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

PHPで作るカレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

MusicBeeのレイアウト変更方法
1位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

クベルで利確
2位

クベルで利確

個別株投資を初めて、はじめての利益確定をしました。 安値で買って高値で売る、株式売買の必勝法に基き作戦を立て、いざ決行!

静岡旅行二日目
3位

静岡旅行二日目

三保の松原から日本平に向かいロープウェーで久能山東照宮に向かい、大江戸温泉物語で汗を流してさやわかのハンバーグを食べた二日目。

108cmの机上台
4位

108cmの机上台

FENGEの108cm 2段式の机上台レビュー! 横幅が広く収納力抜群でデザイン性もいいので非常に満足しています!

TVを見なくなった話
5位

TVを見なくなった話

子供のころはよくTV見てました。それは娯楽の選択肢が少なくて、刺激の強いものがテレビのバラエティだったのが大きいのかも。

鋸山 地獄覗き
6位

鋸山 地獄覗き

千葉県の観光名所「鋸山」へ行き地獄覗きと百尺観音、奥の院無漏窟など。車で行く場合は鋸山駐車場がオススメです。

Googleアップデート対策
7位

Googleアップデート対策

Googleのアルゴリズム変更によるGoogleコアアップデートでSERPsの順位変動が起きたときにやったこと

WI-1000X 30日後レビュー
8位

WI-1000X 30日後レビュー

ソニーのブルートゥースイヤホンWI-1000Xを購入し約1ヵ月使ったレビューです。スペック紹介や使用感オススメ音楽紹介など。

α7Ⅲで夜景
9位

α7Ⅲで夜景

去年はPENTAX Q7で撮影してきた東京タワーと浅草に今年も夜桜撮影に行ってきました。買ったばかりのソニー α7Ⅲを片手に。

WOOD JOB
10位

WOOD JOB

林業を通して村人たちと心を通わせあう心の絆をコミカルに描いた日本の映画。大木を切り倒す圧巻のシーンとイラッとさせられる都会の男。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

マネーリテラシー

マネーリテラシー

お金や税金、資産形成に関する情報や体験談をブログでお伝え!

記事内で紹介している商品

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

2,728
(税込)