テーブル枠の初歩的なことで教えてください

締切済

質問者：Phochan
質問日時：2008/06/20 16:40
回答数：3件

CSSでテーブルを作成した時の事で二つ質問おねがいします
1.
#box {
width:800px;
height:100px;
border: 1px solid #000000;
}
とした時の大きさについて

ボーダーを含めた大きさが800pxで内側の領域が798pxなのか
ボーダーの内側が800pxでボーダーを含めて802pxなのか

2.
#left{
width:200px;
height:80px;
float:left;
background-color:#FFFFFF;
border: 1px solid #000000;
}

#right{
width:600px;
height:80px;
float:right;
background-color:#FFFFFF;
　　border: 1px solid #000000;
}
質問1の中に質問2の物を入れようとすると4px？分飛び出してしまうということでしょうか？
それともボーダー同士は重なり合い同じ大きさになるのでしょうか？

よろしくお願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ICHI-yan
回答日時：2008/06/20 22:14

「ボックスモデル」を検索してみてください。

ｃｓｓの規格として正しくは
width+padding+margin+border
と独自の幅を足していって全体の幅になるのですが、モードによっては
widthにpaddingやborderも含む解釈もあります。
モードは標準モードと過去互換モード（後方互換モード）があり、
＃１さんの最後の方に出てくる宣言でいろいろなブラウザの調整をします。

基本的な実装差異をきちんと把握していないと崩れる原因になります。理論を踏まえた上で自分でやってみて不具合を１つ１つ克服していくしかないでしょうね。floatなので、計算が違うと「落っこちる」現象になると思います。

昔のブラウザを相手にしないなら標準を学ばれた方が楽です。ｃｓｓの解釈を完璧に実現するブラウザはありませんので、解釈の違いと、プログラムミス（バグ）に悩まされることになります。

で、質問に対する答えは「モードによって違う」です。
あんまり役に立たない答えですね。

- 0
- 件

通報する

この回答へのお礼

バージョンによって800pxなのか802pxなのか798pxなのか違うのですね
回答ありがとうございました。

通報する

お礼日時：2008/06/20 22:18

No.2

回答者： snowize
回答日時：2008/06/20 21:27

あー今ちょっと手元に資料がないんでTABLEでもそうなるのか断言はできませんが、ブラウザによって異なる仕様で表示されてたような気がします。

また同じ種類のブラウザでもバージョンによって違ったりとウキーな状態なので、あまりガチガチなレイアウトは組まない方が賢明かと思います。
ちょっと確認できる状況じゃないのであやふやで失礼。検索でブラウザごとの差異やバグ、バージョンアップで変わった点なんかを調べれば全般にわたってきちんとした説明がみつかるかもしれません。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございました

通報する

お礼日時：2008/06/20 22:16

No.1

回答者： outbrave
回答日時：2008/06/20 18:38

試してみれば？

#box1 {
width:800px;
height:100px;
border: 1px solid #000000;
}
#box2 {
width:780px;
height:100px;
border: 11px solid #000000;
}
#box3 {
width:800px;
height:100px;
border: 11px solid #000000;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">