CSSでの余白設定ってどうすればいいんだろう？
marginとpaddingの違いが良く分からないし、ましてやレスポンシブ対応がサッパリ分からない・・・。
こんな悩みに答える記事になっています。
余白設定で大事になるmarginとpaddingについて、今回は紹介していきます！
前回の記事↓ではCSSでの一部の頻出プロパティについて紹介しました。
ですが、今回紹介するmargin・padding（とborder・box-sizingとの関係性）も覚えておかなければならないプロパティの一つです。
- margin・paddingの違い
- margin・paddingの使い方
- marginの相殺や中央寄せについて
- margin・paddingを使ってレスポンシブ対応する方法
- box-sizingとmargin・paddingの関係性
今回は、要素の余白を設定する、marginとpaddingについて図解をしつつ解説していきます！
ポートフォリオを公開するならConoHa WINGで30分で完了！【HTMLやWordPressも】
marginとpaddingの違いは？
早速ですが、marginおよびpaddingの二種類の違いを見ていきます。
上記のように、border(枠線)までの内側余白がpaddingで、外側の余白がmarginとなります。
外側余白ってなんだよ・・・と思われるかもしれませんが、「要素間の距離」という考え方もできます。
例えば、上の文字から10px下に要素を配置したいから上側の余白を10pxとろう・・・。といった感じ。
marginとpaddingの例を見てみよう！
緑色のdiv要素に対してmargin: ○pxと指定してあげれば外側に○px分の余白ができ、padding: ○pxと指定してあげれば内側に○px分の余白ができます。
そして、paddingの部分には、画像のように背景色が適用されます。
marginとpaddingの基本はこれで終わり！
marginとpaddingの色々な指定方法
今のようなmargin: ○pxだったり、padding: ○pxのような指定方法では、上下左右すべての場所に対して余白が設定されます。
上側だけ、とか、上と右だけ設定したい・・・。
みたいな状況があったとしても、marginとpaddingは上下左右の余白を細かく決めることができます！
marginとpaddingを上下左右の一部だけ指定する方法
画像のように、上下左右が決まっていて、margin-○○: ○pxであったりとか、padding-○○: ○pxとかで決めることができます。
詳しい例を見てみましょう。
.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: 10pxとpadding: 5pxを指定したものと全く同じになりますね。
状況に応じて使い分けると簡単に書くことができます！
marginとpaddingを上・右・下・左の順で指定
以下の例のように、半角スペースで区切って、上、右、下、左（上から時計回りと覚えましょう）の順で指定することもできます。
/*上下左右の順に指定*/
.content{
margin: 5px 10px 5px 10px;
padding: 3px 5px 3px 5px;
}上記の例では、marginは上下が5px、左右が10pxに指定されており、paddingは上下が3px、左右が5pxに指定されています。
0の数値を使うことで、例えば上と右だけに余白を指定することも可能です。
/*上下左右の順に指定*/
.content{
margin: 5px 10px 0px 0px;
}上記の例で、上と右だけにmarginを設定できました。
その他のmarginとpaddingの指定方法
以下のようにすれば、上下 左右の指定ができます。
.content{
margin: 5px 10px;/*上下5px、左右10px*/
padding: 0 10px;/*左右のみ10px*/
}また、以下のように3つの値を指定すれば上 左右 下の順で指定ができます。
.content{
margin: 5px 3px 10px;/*上5px、左右3px、下10px*/
padding: 0 5px 10px;/*左右5px、下10px*/
}色々な指定方法があるので、覚えておいて素早く書けるようにしておきたいところです！
marginとpaddingの指定方法まとめ
ここまでで紹介したmarginとpaddingの指定方法は以下の通りです。
- margin: (上下左右), padding: (上下左右)
上下左右を一括指定 - margin-left: (左), padding-bottom: (下)など
位置を指定できる - margin: (上) (右) (下) (左), padding: (上) (右) (下) (左)
上 右 下 左の順番 - margin: (上下) (左右), padding: (上下) (左右)
上下 左右の順番 - margin: (上) (左右) (下), padding: (上) (左右) (下)
上 左右 下の順番
割と全部使う場面があるので覚えておきたいですね。
省略してかけるから、コードもスッキリします！
是非マスターしてきれいに書けるようにしましょう！
px指定でなくても、emでも指定できます。
emについては前回も書きましたが、フォントの大きさに依存する単位です。簡単に見やすい余白が作り出せて、バランスも整って見えるのでem指定は特にオススメです。
marginの相殺【注意しよう】
marginの相殺についてですが、これは画像を見たほうがはやいですね。
左のようにはならず、右のように、値の大きいほうが優先されます。
これをmarginの相殺と呼びまして、思った通りにならない！
といったことが割と起こるので注意が必要です。
paddingでは気にしなくてOKです。marginでのみ起こることです。
marginを使った要素の中央寄せ【レスポンシブサイトにも】
marginをうまく適用すれば、要素を中央寄せすることができます。
例えば、以下のようなボタンがあるとします。
このボタンはうまく画面中央に配置されています。
これが左にずれていたり右にずれていたりするとそれだけで気持ち悪くなるでしょう。
そんな時に、要素の中央寄せとして、marginの値にautoを使います。
autoは「状況に応じて自動で調節する」という意味になります。
これが使えるのは左右だけで、上下の中央配置はこの方法ではできません。
そして、marginにのみ使用できるものとなっています。
display: blockの要素を中央寄せする方法では使えます。
そのため、aタグやspanタグでは使えないので注意が必要です。
また、親要素にtext-align: centerを使う事でも中央寄せが可能です。
ちなみにtext-align: centerを子要素に指定すると、子要素の文字が中央寄せになるだけです。
要素を中央寄せする場合は考え方が異なるので注意ですね。
marginとpaddingをレスポンシブ対応にするには
今ではウェブサイトはPCやタブレットやスマホなど、色々な画面サイズで閲覧されるようになりました。
画面サイズに応じて余白の大きさも変えていく必要が出てきます。
レスポンシブ対応、と言います。
%で指定してレスポンシブ対応にしよう
marginやpaddingの値は%でも指定できます。
親要素に対して、何パーセントか、で決めれるわけですね。
画面幅が小さくなれば当然親要素の幅も小さくなるわけですから、それに応じて余白も小さくなってくれる、ということです。
横幅が合計で100%となるように、設定します。
.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を含めて、実際の幅や高さを出すことができます。
計算しやすくなりました！
border-boxは何が便利なの？
border-boxにすることで、計算がしやすくなるだけ？
気を付けていれば大丈夫そう・・・。
と考える人もいるかもしれません。
しかし、レスポンシブ対応をするときに特に重要になってくるのです。
%指定でレスポンシブな要素を作った！と思いきや、枠線の太さは%指定できないため、確実にずれが生じます。
画像だと、子要素が親要素内に収まっていません。
box-sizing: border-boxを指定することで、計算しやすくなるだけでなく、ずれが生じにくい要素にできるというメリットがあります！
marginとpaddingの使いかたのまとめ
今回は、marginとpadding、それにborder-boxとの関係性についても紹介しました。
- margin・paddingの違い
- margin・paddingの使い方
- marginの相殺や中央寄せについて
- margin・paddingを使ってレスポンシブ対応する方法
- box-sizingとmargin・paddingの関係性
余白を大きくとることでより見やすいデザインにすることが可能です。
しっかりと把握して、よりよいデザインを目指しましょう！
