HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。しかし、で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }

HTMLで横幅をCSSで設定できません。

解決済

質問者：aaiok
質問日時：2010/02/24 16:04
回答数：3件

HTMLで横幅をCSSで設定できません。

headerを作成しているのですが、画像のように横幅が外枠の
wrapperをはみ出して表示されてしまいます。
はみ出した値は5pxとpaddingで指定した値と一致します。

headerをtableタグで作成した場合、横幅700pxの枠中での
padding-left:5px;になり、横幅には変化はありません。

しかし、<div id="header">で横幅を700pxとし、
padding-left:5px;とすると、headerの横幅が
5px増えてしまいます。

<div id="header">の横幅を変化させずに、
paddingを指定することは可能なのでしょうか。
わかる方いらっしゃいましたら宜しくお願い致します。

■HTML
<html>
<body>
<div id="wrapper">
<div id="header"></div>
</div>
</body>
</html>

■CSS
#wrapper {
width: 700px;
}
#header {
width: 700px;
padding-left: 5px;
}

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： steel_gray
回答日時：2010/02/24 16:33

ブロックの幅ってのはwidth+padding+border-widthですから、（テーブルは異端）

境界線が無いとしてheaderのwidthを数値で指定するなら適正値は695pxです。
違う値を書いておいて、それをなんとかしていってのは結構無茶。
変に値を書くより、width:auto≒widthを省略、が最もすっきりすると思いますが。

例えばそれがどうしてもいじれない場所に書いてあるなら、再定義するとか。
#header {
width: 700px;
padding-left: 5px;
}
以下を追記して値を上書きする。
#header {
width: 695px;
}