今回は、CSSのmarginとpaddingについて解説しようと思います。
CSS初心者には「marginとpaddingの違いが分からない」という人もいるかもしれません。私もCSSの勉強を始めた頃は結構あいまいでした。
ということで初心者にも分かりやすいように解説していこうと思います。
marginとpaddingの違い
よく見かける図は、この画像のような感じでしょう。borderの外側がmarginで、borderの内側がpaddingです。
この図だとちょっとイメージしづらいかもしれません。
paddingは内側の余白、marginは要素と要素の距離
他の要素との関係を示すと、この画像のようなイメージです。
要素内の余白を取るにはpaddingを使い、要素と要素の距離を取るにはmarginを使います。
これは要素の背景がグレーなので分かりやすいですが、実際は背景が白い場合があります。
ですので、marginとpaddingどちらを使えばいいか迷った時は、背景をグレーだと思って考えてみましょう。そうすると、どちらを使うべきかが分かるかと思います。
marginを使ってみよう
それではまずはmarginを実際に使ってみましょう。
以下のようなHTMLを書いて、
<div class="box-1"></div>
<div class="box-2"></div>このようなCSSを書いてみましょう。通常レイアウトでfloatプロパティはあまり使いませんが、便宜上floatを使用しています。
.box-1, .box-2 {
width: 200px;
height: 100px;
background-color: #eee;
border: 1px solid #aaa;
float: left;
}
要素が横並びになりました。ボックス間の間隔がないので、marginを使って間隔を開けてあげましょう。
.box-1, .box-2 {
width: 200px;
height: 100px;
background-color: #eee;
border: 1px solid #aaa;
float: left;
}
.box-1 {
margin-right: 20px;
}
間隔が開きましたね。
marginの値を一つにまとめる
複数のmarginを指定する場合、まとめてあげると見やすくなります。
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;上下左右全て同じ値の場合です。これは以下のようにすることができます。
margin: 10px;marginの値が2つの場合
上の例ではmarginの値が一つになりました。marginの値が2つある場合、1つ目の値が上下のmargin、2つ目の値が左右のmarginになります。
margin-top: 10px;
margin-left: 12px;
margin-right: 12px;
margin-bottom: 10px;このコードは以下のように書き換えることができます。
margin: 10px 12px;marginの値が3つの場合
marginの値が3つある場合、1つ目の値が上のmargin、2つ目の値が左右のmargin、3つ目の値が下のmarginになります。
margin-top: 10px;
margin-left: 12px;
margin-right: 12px;
margin-bottom: 8px;このようなコードは以下のように書き換えることができます。
margin: 10px 12px 8px;marginの値が4つの場合
marginの値が4つある場合、1つ目の値が上のmargin、2つ目の値が右のmargin、3つ目の値が下のmargin、4つ目の値が左のmarginになります。
margin-top: 10px;
margin-left: 12px;
margin-right: 20px;
margin-bottom: 8px;このようなコードは以下のように書き換えることができます。
margin: 10px 20px 8px 12px;これは、上から時計回り（上、右、下、左）と覚えると簡単です。
paddingを使ってみよう
お次はpaddingを使ってみましょう。
<div class="box-1">サンプルのテキストです。</div>
<div class="box-2">サンプルのテキストです。</div>
このままだとボックスの中に余白がなく、文章が読みづらいですね。
そこで、paddingを使って余白を入れます。
.box-1, .box-2 {
width: 200px;
height: 100px;
background-color: #eee;
border: 1px solid #aaa;
float: left;
}
.box-1 {
margin-right: 20px;
}box-1には余白が入って読みやすくなりました。
paddingを一つにまとめる
しかし、このままでCSSが長くて無駄が多いですね。paddingは上下左右をまとめて指定することができます。
.box-1 {
margin-right: 20px;
padding: 10px;
}paddingプロパティの値が一つの場合、上下左右に同じ値が入ります。ですので、
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;と
padding: 10px;は、同じ意味になります。
paddingの値が2つの場合
paddingプロパティの値が2つの場合は、最初の値が上下のpadding、2つ目の値が左右のpaddingになります。つまり、
padding-top: 8px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 8px;と
padding: 8px 10px;は、同じ意味になります。
paddingの値が3つの場合
paddingプロパティの値が3つの場合は、最初の値が上のpadding、2つ目の値が左右のpadding、3つ目の値が下のpaddingになります。つまり、
padding-top: 12px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 8px;と、
padding: 12px 10px 8px;は同じ意味になります。
paddingの値が4つの場合
paddingプロパティの値が4つの場合は、最初の値が上のpadding、2つ目の値が右のpadding、3つ目の値が下のpadding、4つ目の値が左のpaddingになります。つまり、
padding-top: 12px;
padding-left: 4px;
padding-right: 10px;
padding-bottom: 8px;と、
padding: 12px 10px 8px 4px;は同じ意味になります。上から時計回り（上、右、下、左）と覚えると簡単です。
box-sizing: border-boxを使おう
先ほどのサンプルでは、box-1とbox-2に同じwidthとheightを指定したにも関わらず、高さと横幅が異なっているのが分かります。
実際の高さ・幅と言うのはwidthやheightとpaddingの合計になります。
これは計算が面倒になるので、box-sizingというプロパティを使って計算の手間を省きましょう。
box-sizingのデフォルトはcontent-boxという値ですが、最近ではbox-sizing:border-boxが使われています。
box-sizingを使うと、widthやheightで指定した内側にpaddingが入るようになっています。
borderが指定されている場合も、widthとheightに含まれます。
<div class="box-1">サンプルのテキストです。</div>
<div class="box-2">サンプルのテキストです。</div>.box-1, .box-2 {
width: 200px;
height: 100px;
background-color: #eee;
border: 1px solid #aaa;
float: left;
box-sizing: border-box;
}
.box-1 {
margin-right: 20px;
padding: 10px;
}こうすると、以下のような表示になります。
これなら、paddingを変更しても高さや幅が不揃いになることがありません。
以下のようにして、全ての要素にまとめてborder-boxを指定しておくと、さらに楽です。
* {
box-sizing: border-box;
}こうしておくと、レスポンシブデザインでも楽になります。
まとめ
初心者にとって、marginやpaddingというのは違いが分からず困惑してしまうものですが、慣れてしまえば大したことはありません。
ここに書いてあることを覚えておけば、ほとんどの場面で対応できると思います。
それではHTMLとCSSの勉強頑張って下さい。
他にもこんな記事があります。
全くの未経験が独学でWEBデザイナーに転職するまで | SHIROMAG
WEBデザインの勉強におすすめの書籍、入門書の紹介 | SHIROMAG
