• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン

2014/07/23

書いた人:
yanoppa!
カテゴリ:
CSS   HTML
60,957 views

margin paddingの基本的な考え方を記事にしました!どうmargin paddingの違いってなんのか?CSS・HTML初心者はぜひ参考にください!

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


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

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

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

margin paddingとはなんぞや?

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

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

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

では、marginからいきましょ~(´・ω・`)b

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を並べてみましょう。

↑ここmargin

↑ここmargin

↑ここmargin

↑ここcontBoxのpadding

↓ここcontBoxのpadding

<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>






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

ここで注意して見ておいて頂きたいのは、真ん中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の上下に20pxmarginをつけてますが。。。

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

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

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

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

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

ではやってみましょう!

marginBox02margin-top40pxにしてみます。

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

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

ちなみにデフォルトでは<p>には上下にmargin1emかかっています。
なので、デフォルトだと<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をきっちり指定する場合は注意が必要ですね。


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

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

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

ピンク色が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もおのずとわかってくるとおもいます。

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


この記事を読んだ人はこんな記事も読んでいます

<

>