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;
}
No.1ベストアンサー
- 回答日時:
ブロックの幅ってのはwidth+padding+border-widthですから、(テーブルは異端)
境界線が無いとしてheaderのwidthを数値で指定するなら適正値は695pxです。
違う値を書いておいて、それをなんとかしていってのは結構無茶。
変に値を書くより、width:auto≒widthを省略、が最もすっきりすると思いますが。
例えばそれがどうしてもいじれない場所に書いてあるなら、再定義するとか。
#header {
width: 700px;
padding-left: 5px;
}
以下を追記して値を上書きする。
#header {
width: 695px;
}
No.3
- 回答日時:
div#header {
width: 100%;
padding-left: 5px;
}
でよいはず。
この回答への補足
回答有難うございました。
XHTMLで作成していますができませんでした。
wrapperの700px+padding-left: 5px;=705pxになります。
No.2
- 回答日時:
上の指定は、正しいですが。
下の指定は、ブラウザにより表示方法が異なりますが。
Safariでは、705pxの横幅になりますよ。
上記のため、下の指定は使用していません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSSでボックスのheightが0になる
-
プルダウンで長い名前の選択肢...
-
【HTML&CSS】フッター下部の余...
-
【HTML】【CSS】【Swiper】 元...
-
float を使うと隙間ができる
-
<li>の黒い点を消したい。
-
CSS テキストフィールドの文字...
-
テーブル内の画像をマウスオー...
-
CSS、width100%でもできる余白
-
古いIEでレイアウト崩れます。
-
marginとナビゲーションの位置...
-
CSSのposition値の上書き(打消...
-
IEとFireFoxでの指定位置のズレ...
-
CSSの角丸での質問です。 今、C...
-
HTMLのiframeの入れ子について
-
DIVの入り子のwidthの指定方法
-
css初心者 フレックスボックス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報