marginとpaddingの使い分けについて

marginとpaddingどちらも余白を作る時に使うプロパティです。どっちを使っても見た目上は同じになるけど、この場合どちらを使うのが正しいのだろうか、そう思うことはありませんか?

そんな時しっかりと使い分けができれば、両方の違いを理解していればよりスムーズにコーディングができるのは間違いないです。

まず始めにmarginとpadding、それぞれの違いを簡単に解説していきます。ちなみにこの使い分けに関しては、考え方の一つとしてご覧下さい。

スポンサーリンク

marginについて

marginは要素の外側に余白を追加するプロパティです。これはなんとなくわかりやすいプロパティですが、見本を作ったのでGoogleChromeのデベロッパーツールを使って詳しく見て見ます。

blue-boxというクラスに対してmargin:40px ;をしてあります。borderの外側にmarginが位置していることがわかります。

要素の外側に余白を追加、というのがポイントです。この事から仮に上下左右に要素がある場合、余白で隙間をあける時はpaddingよりもmarginの方が適していると言えます。

paddingについて

paddingは要素の内側に余白を追加するプロパティです。こちらもデベロッパーツールを使って見本を見ていきます。

余白がborderの内側に来ていることがわかります。blue-boxと全く同じ色の余白が追加されているので、blue-boxが巨大化しているように見えます。

要素の内側に余白を追加した場合、要素の縦横が伸びている事がわかります。つまり要素を引き伸ばす事で余白を追加したい場合はpaddingが適切です。

スポンサーリンク

両者の違い

要素間の隙間をあけたい時はmarginを使い、要素を引き伸ばして間をとりたい時はpaddingを使用するという事になります。

ただこれだけだとただの違いですので、使い分けについても解説します。

以前floatの時に使用した見本です。headerとmainの間に隙間を開けたい場合、mainにプロパティを記述すると、marginでもpaddingでも同じ見た目になります。

ここで使い分けの出番です。

marginとpaddingの使い分け

見た目は一緒ですが、marginとpaddingでは構造が少し変わってきてしまいます。

まずはmarginを使った場合についてです。この場合は要素同士の余白を空けるのが理想なので、marginを使用して兄弟要素同士の隙間をあけている、という構造になります。

ではpaddingを使った場合ですが、mainにpaddingを使用するとmainが上方向に伸びてしまっている、という状態になります。borderを引いてみるとわかりやすいです。

見た目こそ一緒ですが、こういうのはメンテナンス性に欠けるので、仕事としてコーディングをするのであればmarginを使ったほうが良いでしょう。

総まとめ

marginは要素の外側に、paddingは要素の内側に余白を追加するプロパティで、場合によっては同じ見た目のレイアウトができます。

しかし見た目だけではなく、構造を考えれば恐らく両者の違いが見えてくるかと思います。どちらを使うか迷った時ははborderを使うとどうなるかを考えるとわかりやすいかと思います。

これまでの事を簡単に説明すると、兄弟要素同士はmarginで要素同士の隙間を空け、要素が親子関係の場合はpaddingで要素を引き伸ばして間を空ける、ということになります。

非常によく使うプロパティですが、理解して使いこなすのには時間が掛かるかと思います。がんばってください。

コメント