【初心者向け徹底解説】margin padding違いとは?marginの相殺される3つの決まりについて図解で説明

margin paddingの働き

margin…コンテンツから見ての外部への余白

padding…コンテンツから見ての内部への余白

 

 

marginはボックスの外側に領域を増やすのでコンテンツの外側に余白が生まれます。

paddingは内側に領域を増やしコンテンツを広げるのでコンテンツ事大きくなるイメージです。

backgroundに色を付けて行ってみると働き方の違いに気づきます。

marginの特徴…相殺(margin collapsing/マージン コラパシング)

 

marginの特徴としてmarginをかけた上下の余白は相殺されることがあります。

topとbottomのmarginは結合されることがあり、marginの値の数字が大きい方が適応されます。

 

margin の相殺の3つの基本的ケース

 

1.隣接しあう兄弟要素(clear:both; されている条件を除く)

 

 

 

上下左右にそれぞれmarginが働おている要素がある場合、その数値が大きい方が適応されます。

この図のように上のコンテンツが下のコンテンツに比べ小さい数字でmarginを指定しているので上のコンテンツのmarginの働きは無意味となります。

この現象をmarginを相殺すると呼ばれます。

 

2.親とその中のにいる最上と最下にいる子要素

 

 

親要素の中に子要素がありそれぞれmarginがかかっていた場合にも大きい数値が適応されます。

もし親要素と子要素の間に空間を設けたい場合は親要素の方にpaddingをかけ内部に空間を作るのが無難だと思います。

 

3.空ブロック(空タグで作られた)要素

 

 

空タグは閉じタグがないタグの事を言います。

imgタグはインライン要素ですが画像を入れるため幅と高さができるのでブロックレベル要素と同等の働きができます。

※インライン要素とは高さを持たない要素の事である。<img>タグの他では主に<a>タグや<span>など。

なのでこの場合インライン要素ではありますがブロック要素のような働きができますのでmarginは働きかけます。

<img>タグは少し特殊なタグであります。

※基本的にインライン要素にはmarginが上下に働きかけません。



marginとインライン要素

インライン(レベル)要素は高さを持たないので基本的に上下のmarginは効かず左右のmarginのみ有効である。

ただしimg要素(空ブロック/空タグ)などの置換要素(画像を入れ込むため幅高さが設けられブロック要素と変わらない要素になる)は上下左右の全てのmarginが指摘できます。

 

 

 

<解決法>

 

インライン要素の上下にmarginを使いたい時はインライン要素にdisplay:block;をcssで指定してブロック要素化にしてあげるとmarginの上下つまりtopとbottomが指定できるようになります。

 

paddingとインライン・ブロックレベル要素

インラインレベル要素にpaddingをかけると領域が内側から膨張します。

もしリンクタグ(<a>~</a>)などにpaddingをかけていたら実際のリンクエリアよりpadding分の領域が広がるのでクリックエリアも広がります

 

 

背景色などの指定をしていない限り見た目は変わりませんがマウスオーバーした際に関係のない余白部分もクリック領域になっているのは無意味な領域としてあまりよくありませんし気づいた際にかっこ悪いです。

 

<解決法>

 

インライン要素にdisplay:block;をかけブロック要素化にしてあげることで幅(width)と高さ(height)の指定ができるようになります

幅高さを決めてあげることでpaddingをかけても機能上paddingによる無意味な膨張エリアを防ぐことができます。

 

基本的なmarginとpaddingの使い方についてですが、この二つは基本的なことではありますがとても奥が深いプロパティです。

floatがかかわってくる場合にもいくつか法則がありますのでそれについてはこちらの記事から。

 

 

完全初心者向けのHTML・CSS言語を使ってサイトを作るためのおすすめ教材本についても是非参考にしてください、

 

 

フリーターからWeb業界へ転職した話については以下より。

 

出会いが見つかる安心の老舗優良マッチングサイト PCMAX