求職者支援訓練でwebデザインを学ぶデザイン初心者が、padding（パディング）とmargin（マージン）の違いを忘備録としてまとめました。
つい混合してしまいがちですが、難しいものではないので、このブログを見るだけで一通り理解できるはず！
デザイン初心者やノンデザイナーのブロガーさんにおすすめです。
paddingとmarginについて
paddingとmarginどちらも余白を取るためのもので、WEBデザイン初心者にとっては『どちらでもいいのでは？』と思いがち。私自身、つい雰囲気でやってしまっています。
しかし、求職者支援訓練で教えてくれているスクールの先生から「paddingとmarginは働きが全く違うものだ」と言われ、その場ではよくわからなかったものの、しっかり理解したいと思ってまとめました。
様々な違いがありますが、大きな違いとしては、余白をとる場所が異なります。
- margin：要素の外側に余白
- padding：要素の内側に余白
図をみていただくとmarginとborderの間に黒い線（border領域）がありますが、この黒線（border）の内側が要素の大きさです。
この要素の内側に余白をとるのか、要素の外側に余白を取るのかの違いがmarginとpaddingの違いになります。
「margin」はほかの要素との距離をとるための余白と考え、コンテンツを横並びにしたい時に使用すると良いでしょう。
「padding」はその要素に背景色を入れた場合、違和感が無いかと考えて使用するといいでしょう。
要素の指定方法
paddingもmarginも、一括指定・部分指定が可能です。
- padding: 10px; （上下左右に10pxの空白をつける）
- padding: 10px 20px;（上下に10px、左右に20pxの空白をつける）
- padding: 10px 20px 30px 40px;（上に10px、右に20px、下に30px、右に40pxの空白をつける）
※上下左右バラバラで指定するときには、時計回りと覚えるといいですよ！
一方向に指定して空白を付けたいときはこちら
- padding-top: 10px; （上に10pxの空白をつける）
- padding-bottom: 20px; （下に20pxの空白をつける）
- padding-left: 30px; （左に30pxの空白をつける）
- padding-right: 40px; （右に40pxの空白をつける）
paddingとmarginの違い一覧
| 内容 | margin | padding |
| 背景色や背景画像の表示 | ○ | × |
| 余白が重なりあうとき | 相殺される | 相殺されず合計値が余白になる |
| 余白の取り方 | 要素が親子間の余白 | 要素が兄弟間の余白 |
paddingとmarginの使い分け
- 隣り合う要素に余白を開けるのは→margin
- 親要素と小要素の余白を開けるのは→padding
- marginを使用する際は方向を統一すると○
- 余白を開ける部分の背景に色や画像を表示させたい時にはpaddingを使用する
おすすめの人気WEBデザイン参考書
まとめ
求職者支援訓練でwebデザインを学ぶデザイン初心者が、paddingとmarginの違いを忘備録としてまとめました。
つい混合してしまいがちですが、難しくはないので、このブログを見るだけで一通り理解できるはず！
デザイン初心者やノンデザイナーのブロガーさんにおすすめです。
コメント