カテゴリー

キーワード

 
> 【CSS】margin paddingの違い...

【CSS】margin paddingの違いと使い方を紹介


2015 年 4 月 10 日 投稿    view: 51208
タグ:
このエントリーをはてなブックマークに追加

css margin padding

こんにちは、WEBマーケティング部の杉尾です。


今回は、CSSを学ぶ上で、そして使いこなすのに必要なmarginとpaddingを紹介したいと思います。


WEBデザインをしていて目にしない日はないというくらい使う頻度の高いプロパティです。



margin padding


どっちがどっち?

margin・・・・・要素の外側の余白
padding・・・・・要素の内側の余白


慣れれば、そんなこともなくなるんですが、初めの頃ってmarginpaddingのどっちがどっちかわからなくなりますよね。


僕は初心者の頃、padding(パディング)を服に入れる『パッド』と同じ語源だと理解して覚えました。


中に入れるものだから、『要素の中の余白』だということですね。

その逆だから、marginは『要素の外側の余白』。


これでスッキリ覚えられると思います。(多分)


margin padding 概念図


参考画像内を少し解説します。
Contentと書いている部分は、たとえばdivとかpのような要素です。


その要素にwidthを指定した場合は、図のようになります。
paddingをつけたら、その領域が広がります。
Contentの領域はwidthとpaddingを広げた分となります。
ですから、Contentに色をつけていた場合、padding部分にもその色がつきます。


borderはpaddingとmarginの間に描画されます。
これは知っておいてください。


marginはその外ですね。


指定の仕方

参考ソースをどうぞ


HTML

<p class="sample1"></p>
<p class="sample2"></p>
<p class="sample3"></p>
<p class="sample4"></p>

CSS

.sample1 {margin:10px; padding:10px;}
.sample2 {margin:10px 15px; padding:10px 15px;}
.sample3 {margin:10px 15px 20px; padding:10px 15px 20px;}
.sample4 {margin:10px 15px 20px 25px; padding:10px 15px 20px 25px;}

解説


sample1・・・値を1つ指定しているので、上下左右のいずれにも10pxのマージン、パディングがつきます。
sample2・・・値を2つ指定しているので、上下に10pxと左右にも15pxのマージン、パディングがつきます。
sample3・・・値を3つ指定しているので、上に10px、左右に15px、下に20pxのマージン、パディングがつきます。
sample4・・・値を4つ指定しているので、上に10px、左に15px、下に20px、右に25pxのマージン、パディングがつきます。


marginとpaddingは以上のように一括指定することもできるし、個別指定もできます。


こんな感じです。


.foo {margin-top:10px;padding-top:10px;}
.foo {margin-right:10px;padding-right:10px;}
.foo {margin-bottom:10px;padding-bottom:10px;}
.foo {margin-left:10px;padding-left:10px;}

※.fooに特別な意味はありません。


個人的には、参考ソースに書いたような一括指定の方が、後から必要になったときに対応しやすいので好きですが。


注意点

注意点が一つだけあります。


それは、『marginは縦方向で重なるmarginを相殺する』ということです。


これを知らないと、思い通りのスタイリングができずに、思わぬところで時間を食うことになりますのでお気をつけください。


参考ソースと、画像をご覧ください。


HTML

<div class="wrap">
    <div class="cont1">
    
    </div>
    <div class="cont2">
    
    </div>
</div>
<div class="wrap2">
    <div class="cont3">
    
    </div>
    <div class="cont4">
    
    </div>
    
    <div style="clear:both;"></div>
</div>

CSS

.wrap1 {
    padding:50px;
    border:1px solid black;
    width:350px;
}
.wrap2 {
    margin:50px 0 0 0;
    padding:50px;
    border:1px solid #000000;
    width:350px;
}
.box1,box2,box3,box4 {
    width:50px;
    height:50px;
}
.box1 {
    background:#ff0000;
    margin:0 0 50px 0;
}
.box2 {
    background:#0000ff;
    margin:50px 0 0 0;
}
.box3 {
    background:#ff0000;
    margin:0 50px 0 0;
    float:left;
}
.box4 {
    background:#0000ff;
    margin:0 0 0 50px;
    float:left;
}

marginの注意点 相殺される


解説
赤と青のボックスが二つずつ並んでいます。
黒枠に囲まれた上のエリア(wrap1)に、box1(赤)とbox2(青)、下の方(wrap2)にbox3(赤)とbox4(青)が入っています。


上のエリアでは、box1に下マージンを50px、box2に上マージンを50pxつけているにもかかわらず、両者の間は50pxしか空いていません。
それに対し、下のエリアでは、box3に右マージンを50px、box4に左マージンを50pxつけています。そして両者の間は100px空いています。


理屈としては下のエリアの結果が正しいのですが、これはマージンの特性ですので仕方ありません。
こういうものだと覚えてください。


では、box1に『margin-bottom:100px;』、box2に『margin-top:50px;』を指定すると、どうなるでしょう。


この場合、数値の大きい方が優先されて、box1box2の間は100px離れます。


まとめ

注意点さえ押さえれば、marginとpaddingの考え方は理解していただけると思います。


WEBのコーディングで必ず使うものですから、しっかり覚えてくださいね。


最後までお読みいただき、ありがとうございました。



よろしければ、こちらもどうぞ

【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選


【CSS】CSS3で追加されたセレクタ 19選!!


【CSS】CSS3のセレクタとプロパティをIE8に対応させる方法

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事