コーディングしていく中で再頻出の一つである、paddingとmargin。
どちらも同じ余白の設定をするCSSのプロパティですが、何が違うのかよくわからない。
HTML/CSSの初学者には、あるあるの悩みだと思います。
今回はその2つの違いを分かりやすく解説していきます。
（今回のゴール）paddingとmarginを完全に使い分けられるようになる！
一発でわかる「padding/margin」の違い
それでは早速、paddingとmarginの違いを解説していきます。
それはそれぞれを日本語訳に直すと一発でわかると思います。
padding＝詰め物
margin＝余白
要は、paddingは要素の中に詰め物をして余白を押し広げるイメージ
marginは要素の外を余白にして何もない空間をつくるイメージ
です！
とてもシンプルですよね。
ここからはもう少し詳しく聞きたいって人だけ読んでくれれば大丈夫です。
それではそれぞれのプロパティについて詳しく解説していきます。
具体的なpaddingの使い方
最初にpaddingの具体的な使用例についてみていきたいと思います。
わかりやすい例ではボタンを設置して、ボタンにリンク機能を付けたい場合です。
HTMLを下記のように記載したとします。
<a href=”#”> ボタン </a>
こうすることで「ボタン」の部分にリンク機能をつけることができます。
それではこれにどうCSSを実装するか。
それが下記です。
a {
border: 1px solid #000;
padding: 15px 40px;
text-decoration: none;
color: #000;
display: inline-block;
}
borderプロパティによって要素のちょうど外側の部分に線が追加されます。
paddingはそのborderの内側に余白を加えることができます。
今回の場合は上下に15px、左右に40pxです。
ここまでのコードをまとめると下記のようになります。
See the Pen Untitled by kota (@kota1459) on CodePen.
体裁を整えるため、いくつかプロパティを加えていますが、
今回はaタグのborderとpaddingに着目していただければ問題ないです。
このようにpaddingは要素を押し広げることが可能なので
これでボタン内全体どこを押してもリンクをクリックすることができます。
このようにpaddingは要素の中に詰め物をして余白を押し広げる目的で使われます。
具体的なmarginの使い方
paddingがborderの内側の要素を広げるのに対し、marginはborderの外側に余白を設けます。
こちらの方が想像がつきやすいと思います。
- 画像と画像の間に余白を設けたい。
- セクション間に余白を設けたい。
- テキストとテキストの間を空けたい。
このように要素と要素の間に余白が欲しい場面で使えます。
下記に例をあげます。
See the Pen Untitled by kota (@kota1459) on CodePen.
例ではhoge1とhoge2の要素の間にmargin-bottomプロパティを入れることによって余白を設けています。
ここで仮にpaddingを使うと要素自体が大きくなるだけになってしまい、目的と異なってしまいますね。
いかかでしょうか。
これでpaddingとmarginのそれぞれの使い方がわかったのではないかと思います。
ここでWebページでF12キーを押すことで見られるデベロッパーツールを見てみたいと思います。
上記のような画像を見たことがあると思います。
この図の意味がわからなかった人も今ならわかるのではないでしょうか。
真ん中の青い部分は要素の部分。俗にいう、テキスト等が入る部分です。
borderが要素の境界線にあたります。
borderの外側に余白が欲しいときはmargin。
要素を押し広げたい＝borderの内側に余白が欲しいときはpaddingを使用します。
なので、この部分の余白をもう少し広げたい、狭めたいという時はF12キーを押して、そこの部分が何によって(paddingなのかmarginなのか、はたまたborderなのか)指定されているのかを見れば一瞬で修正ができるということです。
ココがポイント
paddingは内側の余白、marginは外側の余白を指定するのに使う
以上、paddingとmarginの使い分け方でした。
正しく使えることでコーディングの時間短縮にもつながると思うので、これらのことを頭に入れてくれると幸いです。
最後までご覧いただき、ありがとうございました。
当サイトではフリーランスを目指す人のためのプログラミング教材の作成を心掛けてサイト運営を努めております。
別途、動画では、初心者向けに一からコーディングの解説を行っておりますので、興味があればご覧いただければと思います。
【クレジット】
VOICEVOX：ずんだもん
立ち絵素材：ヒザフライ様
VOICEVOX：春日部つむぎ
立ち絵素材：ヒザフライ様
