求職者支援訓練で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の違いを忘備録としてまとめました。
つい混合してしまいがちですが、難しくはないので、このブログを見るだけで一通り理解できるはず!
デザイン初心者やノンデザイナーのブロガーさんにおすすめです。
コメント