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

CSS

2021.08.262020.04.20

こんにちは朱夏です。

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

朱夏

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

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

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

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

[もくじ]
marginとは？
paddingとは？
それぞれの使い道
あとがき

marginとは？

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

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

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

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

補足：
「margin」は各要素毎に設定可能です。
隣接する要素両方で「margin」を設定した場合は、間の幅は加算されます。

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

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

    /* 四方向全て */
    margin: 10px;
    /* 上下　左右 */
    margin: 10px 10px;
    /* 上　右　下　左 */
    margin: 10px 10px 10px 10px;
    /* 上だけ */
    margin-top: 10px;
    /* 右だけ */
    margin-right: 10px;
    /* 下だけ */
    margin-bottom: 10px;
    /* 左だけ */
    margin-left: 10px;

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

paddingとは？

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

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

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

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

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

「padding」も、「margin」と同じく各要素毎に設定可能です。
親要素側から要素の内側に向かって「padding」で設定した値分の余白を開ける事が出来ます。

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

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

    /* 四方向全て */
    padding: 10px;
    /* 上下　左右 */
    padding: 10px 10px;
    /* 上　右　下　左 */
    padding: 10px 10px 10px 10px;
    /* 上だけ */
    padding-top: 10px;
    /* 右だけ */
    padding-right: 10px;
    /* 下だけ */
    padding-bottom: 10px;
    /* 左だけ */
    padding-left: 10px;

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