忍者ブログ

[PR]

2018年04月21日

たくさんの方にこの情報を広められるように、ぜひソーシャルブックマークお願いします。
下のボタンをクリックすると、共有できます。

Yahoo!ブックマークに登録
このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

応援クリックお願いします。
ブログランキング・にほんブログ村へ  人気ブログランキングへ  FC2ブログランキング

余白の設定の方法~padding

2009年12月01日

たくさんの方にこの情報を広められるように、ぜひソーシャルブックマークお願いします。
下のボタンをクリックすると、共有できます。

Yahoo!ブックマークに登録
このエントリーをはてなブックマークに追加

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

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

テキスト テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト テキスト

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

テキスト テキスト テキスト テキスト テキスト 
テキスト テキスト テキスト テキスト テキスト 

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


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

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

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

image5.gif

つまり、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の解釈があるので注意が必要です。
PR

応援クリックお願いします。
ブログランキング・にほんブログ村へ  人気ブログランキングへ  FC2ブログランキング

Comment
  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

SEO対策はこちら

無料で被リンク100件もらえる!
無料で被リンク100

私が管理している自動相互リンクサイトです。
SEO対策にお役立てください。
自動相互リンクで被リンクを増やしてSEO対策!

カテゴリー

独自ドメイン

アーカイブ

最新記事

最古記事

RSS

ブログ内検索

バーコード

リンク

アクセス解析