2011.06.16
【HTML】CSSでのボックスサイズの指定
いつも最後に表示したときにレイアウトがおかしいと調べていると
ボックスサイズがちょっと大きくて折り返していたりする。
そんなことが多いのでメモっておく
ボックスサイズにかかわる属性
| 属性 | 備考 |
|---|---|
| margin | 枠外側のスペース |
| border | 枠を囲む線 |
| padding | 枠内側の背景とborder領域のスペース |
| width height |
メイン領域のサイズ |
ちゃんとした幅を指定するには上記のものの合算になる
.test
{
margin: 5px;
border:solid 1px #0000ff;
padding: 3px;
width: 200px;
height: 100px;
}
さんぷる
こんな感じのクラスだとボックスが (220,120) のサイズになってしまう。
Firefoxだとうまくいっているようにみえていたが、
IEで表示するとすぐずれる。
Webめんどいな～。
関連記事