どっちでもいい?paddingとmarginの違い【初心者向け】 | nekochan's ※当ブログは広告を含みます。

どっちでもいい?paddingとmarginの違い【初心者向け】

WEBデザイン

求職者支援訓練で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の違い一覧

内容marginpadding
背景色や背景画像の表示×
余白が重なりあうとき相殺される相殺されず合計値が余白になる
余白の取り方要素が親子間の余白要素が兄弟間の余白

paddingとmarginの使い分け

  • 隣り合う要素に余白を開けるのは→margin
  • 親要素と小要素の余白を開けるのは→padding
  • marginを使用する際は方向を統一すると○
  • 余白を開ける部分の背景に色や画像を表示させたい時にはpaddingを使用する

おすすめの人気WEBデザイン参考書

まとめ

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

その他のWEBデザインに関する記事はこちら

「デザナル」は安くておすすめのWEBデザインスクール【月額9800円】
【無料あり】WEB制作のポートフォリオにおすすめのレンタルサーバー3選
WEBデサインスクールは無駄?就職が厳しいのは本当?【体験談】
女性向けのおすすめWEBデサインスクール3選!主婦や子育て中でもできる?
シーライクスの無料体験行ってみた!何ができる?口コミ・評判は?

コメント

タイトルとURLをコピーしました