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

[PR]

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

余白の設定の方法～padding

今回はpaddingの設定についてご説明します。

divタグにpaddingを指定しないと以下のようになります。（わかりやすいようにdivに線をつけています。）


これではなんか窮屈な感じになってしまいますので4方向にpaddingを指定してみます。


paddingを指定するとこのようになります。


paddingを指定する際に注意していただきたいのが、インターネットエクスプローラー（以下IE）とFireFoxなどのモダンブラウザと呼ばれるものとでは、このpaddingとwidth・heightの解釈が違います。

IEではwidthの内側にpaddingがあると解釈しますが、モダンブラウザではwidthの外側にpaddingがあると解釈します。

図で表すと以下のようになります。



つまり、divにwidth（またはheight）を200pxで指定してpaddingを左右10pxずつ指定した場合、IEではdivの幅が200pxのままですが、FireFoxなどのモダンブラウザではdivの幅が220pxになるのです。

同じCSSの記述でも見るブラウザによってレイアウトが違って見え、レイアウト崩れを起こす原因になるので注意が必要です。

ちなみに正しい解釈は、モダンブラウザの解釈が正しいのですが…。


この問題の解決方法は、widthやheightとpaddingを一緒のタグに記述しないようにしてください。

どぅしても、指定しなければいけない場合は、divの入れ子をして解決します。
・悪い例
HTMLソース
<div id="1"></div>
CSS
#1{
width:200px;
height:200px;
padding:10px;
}

・良い例
<div id="1">
<div id="2"></div>
</div>
CSS
#1{
width:200px;
height:200px;
}
#2{
padding:10px;
}

2つのdivに分けることでwidth・heightとpaddingを一緒に指定することを回避することができます。


この他にもIE独自のCSSの解釈があるので注意が必要です。

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