今さら聞けない、marginとpaddingの違い

こんばんちわ、初夏ですでに溶けそうなゲルっぱ。。。やのっぱです(´・ω・｀)ｳｪｳｪ

今回は超絶初心者さんへ贈る、margin(マージン)とpadding(パディング)を軽めに説明します。

注意：本記事のソースはclearfixを導入した状態で作っています。 実際にお試しになる場合はclearfixを導入してください。
clearfixなんぞや？はこちら

margin paddingとはなんぞや？

marginとは要素間の間隔のことです。

paddingとは要素内の余白のことです。

混同しがちなので言い方を変えてみました。

では、marginからいきましょ～(´・ω・｀)ｂ

margin

プロパティ

個別

margin-top: ○px;	上に対するmargin
margin-right: ○px;	右に対するmargin
margin-bottom: ○px;	下に対するmargin
margin-left: ○px;	左に対するmargin

ショートハンド

margin: ○px;	四方向共通
margin: ○px ○px;	上下　左右
margin: ○px ○px ○px;	上　左右　下
margin: ○px ○px ○px ○px;	上　右　下　左

今回論理プロパティ（margin-startとか）は説明に入れません。(IE8以前は未対応だし。。。またおまえかIEたん;)

これは後日「【CSS】marginについてちょっと本気出して説明してみた」にて詳しく説明いたします。

ではまず、ボックスモデルを確認してみましょう。

このように、marginとは要素の外に対するものなのです。
なので、たとえばdivに背景色を付けていても、marginは外の間隔のことなので、marginの領域にそのdivの背景色は付きません。

なんのこっちゃ抹茶に紅茶な方は、borderやbackgroundを付けてみましょう。

実際にやって見るとよくわかります。百聞は一見に如かずです( ｰ`дｰ´)ｷﾘｯ

ではもっとわかりやすくするため、divを並べてみましょう。

<style>
.contBox {
  width: 480px;
  padding: 25px 0;
  margin: 0 auto;
  background:#fff;
  border: 2px solid #ccc;
}
.contBox .marginBox01 {
  float: left;
  width: 200px;
  height :200px;
  margin: 0 20px;
  background: #9ADEFF;
}
.contBox .marginBox02 {
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 20px;
  background: #BAFFAD;
}

</style>
<div class="contBox clearfix">
  <div class="marginBox01"></div>
  <div class="marginBox02"></div>
</div>

ChromeやFirefoxなどの開発者ツールでフォーカスするとmarginやpaddingに色がつくので、使い方がわかる方は確認してみましょう。

ここで注意して見ておいて頂きたいのは、真ん中のmarginです。
20px＋20pxで40pxになっているのを覚えておいてくださいね！

では次に、よく引っかかるmarginの相殺を考えていきます。

これがあるので、marginを理解してないうちはmargin使いにくっ！！っとなるのかもしれません。

marginの相殺とは

marginは縦方向（垂直方向）に限り、重なるmarginを相殺する性質があります。

どういうことかといいますと

<style>
.contBox02 {
  width: 480px;
  margin: 0 auto;
  border: 2px solid #ccc;
  background:#fff;
}
.contBox02 .marginBox01 {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  background: #9ADEFF;
}
.contBox02 .marginBox02 {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  background: #BAFFAD;
}
</style>
<div class="contBox02">
  <div class="marginBox01"></div>
  <div class="marginBox02"></div>
</div>

このようなボックスモデルをつくりました。
marginBoxの上下に20pxのmarginをつけてますが。。。

marginBox01とmarginBox02の間が20px+20pxの40pxになっていないのにお気づきになりましたでしょうか？

上下に隣接する要素のmarginが同じ場合、相殺されてしまい、20pxの場合40pxではなく20pxになります。

では、どちらかが少ない、または多い場合はどうなのか？

その場合、値が大きいほうが勝ちます。

20pxと40pxだと40pxに軍配があがります。

ではやってみましょう！

marginBox02のmargin-topを40pxにしてみます。

どうでしょう？40px離れましたね。

このような性質があるので、使いようによっては便利につかえます。

ちなみにデフォルトでは<p>には上下にmarginが1emかかっています。
なので、デフォルトだと<p>同士がつめつめにならないんですね！

次はpaddingに行ってみましょう！

padding

プロパティ

個別

padding-top: ○px;	上に対するpadding
padding-right: ○px;	右に対するpadding
padding-bottom: ○px;	下に対するpadding
padding-left: ○px;	左に対するpadding

ショートハンド

padding: ○px;	四方向共通
padding: ○px ○px;	上下　左右
padding: ○px ○px ○px;	上　左右　下
padding: ○px ○px ○px ○px;	上　右　下　左

この様に、paddingは内側の余白のことです。

内側の余白なので、paddingを追加するとブロック要素自体の大きさもかわります。

要は脂肪ですね。

borderを皮膚とするとpaddingは脂肪です。
増えるとブロック要素は太っていきます。

なので、floatなどでwidthをきっちり指定する場合は注意が必要ですね。

paddingはmarginと違い、相殺されることもありません。

特徴としてはブロック要素を膨張させるので背景色なども一緒についてきます。
これもborderとbackgroundを付けてあげるとわかりやすいので、やってみてくださいね。

では実践してみましょう！

ピンク色がpaddingです。
白いところがmarginですね、わかりやすいように無理やりつくりましたが、黄色のところがテキストだったりします。

marginにくらべ、難しくはないのですが、ブロック要素の大きさを変えてしまうということだけ気をつけましょう。

これでほぼ終わりなのですが、一つpaddingをつかった例を作ってみました。(IE10～対応)

<style>
.navTest {
  width:100%;
  padding:4px 0;
  background: #5b5b5b; /* Old browsers */
  background: -moz-linear-gradient(top,  #5b5b5b 0%, #2b2b2b 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b5b5b), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #5b5b5b 0%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #5b5b5b 0%,#2b2b2b 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #5b5b5b 0%,#2b2b2b 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #5b5b5b 0%,#2b2b2b 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-8 */
  border-top: 2px solid #9B9B9B;
  border-bottom: 2px solid #9B9B9B;
}
.navTest .navList {
  overflow: hidden;
  width:80%;
  margin:0 auto;
  padding:0;
  box-shadow: 1px 0 0 #686868,-1px 0 0 #414141;
  -webkit-box-shadow: 1px 0 0 #686868,-1px 0 0 #414141;
  -moz-box-shadow: 1px 0 0 #686868,-1px 0 0 #414141;
  list-style: none;
  font-weight: bold;
  text-align: center;
  color: #DDDDDD;
}
.navTest .navList li {
  float:left;
  width:20%;
  padding:1% 0;
  box-shadow: inset 1px 0 0 #686868,inset -1px 0 0 #414141;
  -webkit-box-shadow: inset 1px 0 0 #686868,inset -1px 0 0 #414141;
  -moz-box-shadow: inset 1px 0 0 #686868,inset -1px 0 0 #414141;
  cursor:pointer;
}
.navTest .navList li:hover {
  text-shadow: 0px 0px 6px rgba(0, 255, 0, 0.56);
  color:#6FA25B;
}
</style>
<div class="navTest">
  <ul class="navList clearfix">
  	<li>NAVI01</li>
  	<li>NAVI02</li>
  	<li>NAVI03</li>
  	<li>NAVI04</li>
  	<li>NAVI05</li>
  </ul>
</div>

ざくざく作ったのでソースがあれですが、paddingを効果的に使うことで、ナビの縦線が途中から始まってたり
NAVIの文字を上下中央にしたりしてます。改行されるとアウトですが(汗
縦全部に線あるよりも、なんとなくこっちのほうがかっこいい。。。気がします(・ω・｀;)

marginでも出来るんですけれど、ボックスモデル的にこっちのが綺麗かなと

さて、marginの特性がわかればpaddingもおのずとわかってくるとおもいます。

まずは色々やってみて検証してみるのが良いと思います。でわ！素敵なコーディングライフを～(・ω<)ﾉｼ