【CSS】marginとpaddingの違いとは？要素と要素の間の話【初心者向け】

こんにちは朱夏です。

今回は、CSSの「margin」と「padding」の話をしたいと思います。

朱夏

marginとpaddingってどっちがどっちか解らなくなる。
どうやって使い分けたらいいんだろう？

要素の位置を微調整する時などに使われる、CSSでは基本的なプロパティですが、使い方が難しいプロパティでもあるかと思います。

この「margin」と「padding」について、詳しく解説していきたいと思います。

それではいってみましょう。

marginとは？

「margin」とは、隣接した要素と要素の間に隙間を開けるためのプロパティです。
具体的には、要素の外側に隙間を指定する事が出来ます。

先ずは「margin」を使った以下のサンプルを見てみてください。

See the Pen
QWjEJjW by 朱夏 (@syunatsu1)
on CodePen.

下に行くほど「margin」の値を大きくしています。
「margin」は要素の外側に隙間を開けるので、その分要素がずれているのが解ると思います。

「margin」には指定方法が複数あります。

指定方法を以下に紹介します。

一方向にだけ「margin」を付ける事も出来るので、ナビゲーションバーの様に横並びの要素にだけ隙間を開けたいときなどでも、他に影響を与えず隙間を開ける事が出来ます。

paddingとは？

「padding」とは、要素内の子要素との間に余白を開けるためのプロパティです。

「padding」を使ったサンプルはこちらです。

See the Pen
jObrdQj by 朱夏 (@syunatsu1)
on CodePen.

こちらも下に行くたびに「padding」を増やしています。

「padding」で余白を取った分、要素が大きくなっているのが解ると思います。

「padding」にも「margin」と同じく複数の指定方法があります。

指定方法は以下になります。

こちらも方向ごとに指定する事が出来ます。
要素内のテキストなどの位置を調節するのによく使われます。

あとがき

というわけで、CSSの「margin」と「padding」について書いてみました。

今回のまとめはこちら。

• 「margin」は要素の外側の隙間を開ける
• 「padding」は要素の内側に余白を開ける
• 一括で指定や、上下左右個別に指定する事も可能

サイトデザインのバランスに関わる部分なので、しっかり覚えて見やすいデザインを作っていきたいと思います。

今回は以上です。
今回もよろしくお願いします。