上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 いろいろレイアウトをしていると、divに当てたcssの「padding」が時折妙な動きをして、レイアウト崩れを起こすことがあります。paddingは、どういう仕組みなのか、調べてみます。




paddingのしくみ



300px

width : 300px ; height : 50px ;


400px

width : 300px ; padding : 50px
 


350px

width : 300px ; height : 50px ; padding-left : 50px
 



 どういうことだか分かるでしょうか?
 要素に「padding」を適応すると、まるで「margin」を適応したかのように、300pxの周りに空間が出来るのです。しかし、正確には周りに空間が出来るのではなく、膨らんでしまった状態です。
 今回はブロック要素にpaddingを適応しているので、まるでマージンのごとくですが(ボーダーはきちんと外側に出ている)、インライン要素(spanなど)にコレを適応すると、どういうことになっているのか良く分かります。

インライン要素にpaddingを適応すると?

 パッディングはふくれあがる。パディングはふくれあがる。パッディングはふくれあがる。パディングはふくれあがる。パッディングはふくれあがる。パディングはふくれあがる。ここにパディングを当てているよパッディングはふくれあがる。パディングはふくれあがる。パッディングはふくれあがる。パディングはふくれあがる。パッディングはふくれあがる。パディングはふくれあがる。


 左右は、インライン要素でも押しのけるのですが、上下に飛び出しているのが良く分かります。
 要素にパッディングを適応すると、微妙に実態がない感じでふくれあがるわけですね。




膨らまないようにするには?



 これを、思い通り(300pxで指定しているんだから、300px内に収まってよ的な)に300px内に膨らませないようにするには、予め膨らみ分を想定してレイアウトするか、外側に300pxのラッピング用ボックスを作ってあげるしかありません。

300px

width : 300px ; height : 50px ;
padding : 50px

 青いボックスで「width : 300px ; height : 50px ;」で固定して、中身に「padding : 50px ;」を入れてみました。
 何か妙なことになりました。横幅はぎゅっと入れ込まれたのに、下がはみ出してしまいました。

 コレは、中身の高さが外側の赤ボックスの高さ50pxを超えたために、ブチュッと飛び出たわけですね。
 中身の高さは、padding-topの50px + テキストの高さ + padding-bottomの50pxで、100pxとテキストの高さ分ブチュッといったわけです。
 しかも、おわかりでしょうか。
 なんたることか、説明文のテキストまで隠してしまいました。


 実態があるような、無いような、不思議な状態になるわけです。
 逆に、ガチガチにレイアウトをするなら、すべてのブロックに予めwidth指定用のラッピングボックスを作ればいいわけです。

 ボーダーの関係も、ラッピングボックスを作っておけば、ブラウザ間の差異も抑えられます。
 IEはボックスの内側にボーダーを引きますが、その他のブラウザは外側にボックスを引くようになっています。IE以外は、ボーダーを入れると、そのボーダーのサイズ分ボックスが大きくなるわけですが、ラッピングのボックスを作っておけば、IE以外も、ボーダーを含めて300px内に収まるようになります。
このエントリーをはてなブックマークに追加
Sat.09.01.2012
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。