カテゴリ一覧から記事を探す

CSSのmarginとpaddingの使い方!複雑な関係性を抑えよう!

CSSのmarginとpaddingの使い方!複雑な関係性を抑えよう!

余白設定で大事になるmarginとpaddingについて、今回は紹介していきます!

前回はCSSで、一部の頻出プロパティについて紹介しました。

ですが、このmargin・padding(とborder・box-sizingとの関係性)も覚えておかなければならないプロパティの一つです。

紹介すること

  • margin・paddingの違い
  • margin・paddingの使い方
  • marginの相殺や中央寄せについて
  • margin・paddingを使ってレスポンシブ対応する方法
  • box-sizingとmargin・paddingの関係性

今回は、要素の余白を設定する、marginとpaddingについて学んでいきます。

1.marginとpaddingの違いは?

早速ですが、marginおよびpaddingの二種類の違いを見ていきます。

marginとpaddingの違いは?

上記のように、border(枠線)までの内側余白がpaddingで、外側の余白がmarginとなります。

外側余白ってなんだよ・・・と思われるかもしれませんが、「要素間の距離」という考え方もできます。

例えば、上の文字から10px下に要素を配置したいから上側の余白を10pxとろう・・・。といった感じですね。

marginとpaddingの例を見てみよう!

marginとpaddingの例を見てみよう!

緑色のdiv要素に対してmargin: ○pxと指定してあげれば外側に○px分の余白ができ、padding: ○pxと指定してあげれば内側に○px分の余白ができます。

そして、paddingの部分には、画像のように背景色が適用されます。

基本はこれで終わりです!

2.marginとpaddingの色々な指定方法

今のようなmargin: ○pxだったり、padding: ○pxのような指定方法では、上下左右すべての場所に対して余白が設定されます。

上側だけ、とか、上と右だけ設定したい・・・。

みたいな状況があったとしても、marginとpaddingは上下左右の余白を細かく決めることができます!

marginとpaddingを上下左右の一部だけ指定する方法

marginとpaddingを上下左右の一部だけ指定する方法

画像のように、上下左右が決まっていて、margin-○○: ○pxであったりとか、padding-○○: ○pxとかで決めることができます。

詳しい例を見てみましょう。

CSS
.content{
  margin-top: 10px;/*上側のmarginを設定*/
  margin-right: 10px;/*右側のmarginを設定*/
  margin-bottom: 10px;/*下側のmarginを設定*/
  margin-left: 10px;/*左側のmarginを設定*/

  padding-top: 5px;/*上側のpaddingを設定*/
  padding-right: 5px;/*右側のpaddingを設定*/
  padding-bottom: 5px;/*下側のpaddingを設定*/
  padding-left: 5px;/*左側のpaddingを設定*/
}

上記の例では、margin: 10pxpadding: 5pxを指定したものと全く同じになりますね。

状況に応じて使い分けると簡単に書くことができます!

marginとpaddingを上・右・下・左の順で指定

以下の例のように、半角スペースで区切って、上、右、下、左(上から時計回りと覚えましょう)の順で指定することもできます。

CSS
/*上下左右の順に指定*/
.content{
  margin: 5px 10px 5px 10px;
  padding: 3px 5px 3px 5px;
}

上記の例では、marginは上下が5px、左右が10pxに指定されており、paddingは上下が3px、左右が5pxに指定されています。

0の数値を使うことで、例えば上と右だけに余白を指定することも可能です。

CSS
/*上下左右の順に指定*/
.content{
  margin: 5px 10px 0px 0px;
}

上記の例で、上と右だけにmarginを設定できました。

その他のmarginとpaddingの指定方法

以下のようにすれば、上下 左右の指定ができます。

CSS
.content{
  margin: 5px 10px;/*上下5px、左右10px*/
  padding: 0 10px;/*左右のみ10px*/
}

また、以下のように3つの値を指定すれば上 左右 下の順で指定ができます。

CSS
.content{
  margin: 5px 3px 10px;/*上5px、左右3px、下10px*/
  padding: 0  5px 10px;/*左右5px、下10px*/
}

色々な指定方法があるので、覚えておいて素早く書けるようにしておきたいところです!

marginとpaddingの指定方法まとめ

ここまでで紹介したmarginとpaddingの指定方法は以下の通りです。

指定方法まとめ

  1. margin: (上下左右), padding: (上下左右)
    上下左右を一括指定
  2. margin-left: (左), padding-bottom: (下)など
    位置を指定できる
  3. margin: (上) (右) (下) (左), padding: (上) (右) (下) (左)
    上 右 下 左の順番
  4. margin: (上下) (左右), padding: (上下) (左右)
    上下 左右の順番
  5. margin: (上) (左右) (下), padding: (上) (左右) (下)
    上 左右 下の順番

割と全部使う場面があったりしますね。

px指定でなくても、emでも指定できます。
emについては前回も書きましたが、フォントの大きさに依存する単位です。簡単に見やすい余白が作り出せて、バランスも整って見えるのでem指定は特にpaddingでオススメです。

3.marginの相殺

marginの相殺についてですが、これは画像を見たほうがはやいですね。

marginの相殺

左のようにはならず、右のように、値の大きいほうが優先されます。

これをmarginの相殺と呼びまして、思った通りにならない!
といったことが割と起こるので注意が必要です。

 paddingでは気にしなくてOKです。marginでのみ起こることです。

4.marginを使った要素の中央寄せ

marginをうまく適用すれば、要素を中央寄せすることができます。

例えば、以下のようなボタンがあるとします。

このボタンはうまく画面中央に配置されていて、左にずれていたり右にずれていたりするとそれだけで気持ち悪くなるでしょう。

そんな時に、要素の中央寄せとして、marginの値にautoを使います。

marginを使った要素の中央寄せ

auto「状況に応じて自動で調節する」という意味になります。

display: blockの要素を中央寄せする方法では使えます。
そのため、aタグspanタグでは使えないので注意が必要です。

 文字を中央寄せする場合は、text-align: centerで指定です。

また、これが使えるのは左右だけで、上下の中央配置はこの方法ではできません。

そして、marginにのみ使用できるものとなっています。

5.marginとpaddingをレスポンシブ対応にするには

今ではウェブサイトはPCやタブレットやスマホなど、色々な画面サイズで閲覧されるようになりました。

画面サイズに応じて余白の大きさも変えていく必要が出てきます。
レスポンシブ対応、と言います。

%で指定してレスポンシブ対応にしよう

marginやpaddingの値は%でも指定できます。

親要素に対して、何パーセントか、で決めれるわけですね。

画面幅が小さくなれば当然親要素の幅も小さくなるわけですから、それに応じて余白も小さくなってくれる、ということです。

%で指定してレスポンシブ対応にしよう

横幅が合計で100%となるように、設定します。

CSS
.child{
  width: 50%;
  margin: 0 20%;
  padding: 0 5%;
}

画像のようにするなら、上記のようなCSSになります。

例えば親要素の幅が1000pxの場合だと・・・
要素の幅は500px
左右のpaddingは50pxずつ
左右のmarginは200pxずつ500px + (50px × 2) + (200px × 2) = 1000pxとなりますね。

実際の要素の幅や高さに気をつけよう

少し話は変わりますが、初期状態だと、要素の幅はwidth+padding(+border)の値になっています。

実際の要素の幅や高さに気をつけよう

このように、要素の幅を100pxになるよう指定したつもりが、いつの間にか140pxになっていてずれが生じてしまった・・・。

ということが起こります。

box-sizingというプロパティを変更することで簡単に解決できます!

デフォルトでは、box-sizing: content-boxとなっています。
それを、box-sizing: border-boxにします。

border-boxが指定された要素は、padding+borderを含めて、実際の幅や高さを出すことができます。

実際の要素の幅や高さに気をつけよう2

計算しやすくなりました!

border-boxは何が便利なの?

border-boxにすることで、計算がしやすくなるだけ?
気を付けていれば大丈夫そう・・・。

と考える人もいるかもしれません。

しかし、レスポンシブ対応をするときに特に重要になってくるのです。

border-boxは何が便利なの?

%指定でレスポンシブな要素を作った!と思いきや、枠線の太さは%指定できないため、確実にずれが生じます。

画像だと、子要素が親要素内に収まっていません。

box-sizing: border-boxを指定することで、計算しやすくなるだけでなく、ずれが生じにくい要素にできるというメリットがあります!

6.まとめ

今回は、marginとpadding、それにborder-boxとの関係性についても紹介しました。

余白を大きくとることでより見やすいデザインにすることが可能です。

しっかりと把握して、よりよいデザインを目指しましょう!

次のステップ:配置方法について詳しく学ぶ