もしもドロップシッピングで稼ぐ方法【副業】

[PR]

応援クリックお願いします。
　 　

余白の設定の方法～margin

今回は、paddingとは別の余白の設定方法marginです。

HTMLソースやCSSの話で難しい内容かもしれませんが、SEO対策やコンバージョン率（成約率）を上げるのに役立つ知識なので、覚えておくと便利です。

paddingはdivボックスの内側に余白を設定するのに対し、marginは外側に余白を設定する時に使います。

具体的には、この記事が書いてある枠をつけたdivボックスの左側にある白い余白は、marginで設定しています。右側のメニューの右側の白い余白もmarginで設定しています。


marginの書き方もpaddingと同様です。
・個別に指定する場合
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

・4方向まとめて指定する場合
margin:10px 20px 30px 40px ;

・4方向共同じ値を指定する場合
margin:10px;


2つのdivボックスを10pxずつmarginすると以下のようになります。（わかりやすいように枠をつけています）

画面上ではわかりにくいかもしれませんが、4方向共に10pxずつmarginしているので記事を囲む枠との間に10pxの余白ができて、ボックス1とボックス2の間にも10pxの余白ができています。

※ボックス1の下とボックス2の上にそれぞれ10pxのmarginが指定されています。その場合、marginの相殺と言って値が多い方が採用されます。今回は、同じ値なので10pxの余白になります。


また、marginもIE独自の解釈があって、フロートさせているdivにmarginを指定すると、指定した値の倍くらいの余白になってしまいます。

この場合の対処法はいくつかあるのですが、おすすめの方法はfloatとmarginを設定しているdivのCSSに次の一行を追加してください。

display:inline;

この一行を追加するだけで、このIEバグを解消することができます。

応援クリックお願いします。