paddingとmarginの違いは「余白」と「距離」です

html/cssプログラミング

HTML/CSSでよく出てくる「padding」と「margin」ですが、似ていてごっちゃになりますよね。

結論から言うと、

padding = 余白
margin  = 距離

です。

解説していきます。

paddingとmarginの違いとは?

以下の画像を見ていただければひと目でわかります。

緑の部分がpaddingオレンジの部分がmarginです。

paddingは自分の要素の内側に隙間をあける
marginは自分の要素の外側に隙間をあける

これがpaddingとmarginの違いです。

それぞれのメリット

違いがわかったところで、実際にどう使うべきか悩む方も多いかと思います。

そこで、よくある例をそれぞれ取り上げました。

paddingのメリット

例えば↓の画像のように、文字の外側に枠線がある要素があったとします。

しかしこれだと、文字と枠線の距離が近すぎて窮屈に感じますね。

こういった場合に、paddingを使うと、要素の内側に余白を作ることができます。

padding = 余白」というのを100回唱えて覚えましょう。

marginのメリット

例えば商品が並んだサイトで、以下のようなものがあったとします。

商品ごとの隙間が狭すぎてちょっと見栄え悪いですよね。

そんなときにmarginを使えば、要素ごとの距離を調整することができます。

margin = 距離」というのをまた100回唱えて覚えていきましょう。

paddingとmarginは見分けられるのか?

どちらにも共通していえるのが、「隙間をあける」ということ。

しかし、一見しただけでは違いがわからないのも事実。

↓この文字と枠線の隙間は、paddingとmarginどちらだと思いますか?

さっきの解説をみてからだとpaddingに見えますが、marginで同じことをすることも可能。

このようにぱっとみだけでは見分けられないのがpaddingとmarginのやっかいなところです。

そのため、コーディングをするときは、できるだけ「余白と距離」を差別化しながら調整していくことが、WEBデザイナーやコーダーにとって重要となります。

「paddingは余白」「marginは距離」を唱えまくれ

僕もCSS勉強したての頃、どっちがどっちかよく忘れていました。。。

でもこればっかりは何度も自分に言い聞かせて覚えるしかないので、とにかく数こなしていくといいでしょう。

「paddingは余白」「paddingは余白」「paddingは余白」「paddingは余白」「paddingは余白」「paddingは余白」「paddingは余白」「paddingは余白」「paddingは余白」「paddingは余白」「paddingは余白」「paddingは余白」「paddingは余白」「paddingは余白」

「marginは距離」「marginは距離」「marginは距離」「marginは距離」「marginは距離」「marginは距離」「marginは距離」「marginは距離」「marginは距離」「marginは距離」「marginは距離」「marginは距離」「marginは距離」「marginは距離」「marginは距離」

これで完璧!!

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