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

CSS
スポンサーリンク

こんにちは朱夏です。

今回は、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;

 

 

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

 

 

あとがき

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

今回のまとめはこちら。

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

 

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

 

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

 

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