ブラウザ枠を超えず表示する方法

質問

• CSSとHTMLを使用して、ブラウザ枠を超えずに要素を表示する方法について質問があります。
• 現在の設定では、要素のボーダーラインがブラウザ枠を突っ切って表示されてしまっています。
• スクロールなしで要素のボーダーを確認する方法についても知りたいです。

回答No.1

einn

* {
padding: 0px;
margin: 0px;
}

html, body {
margin: 10px;
}

#container {
width: 100%;
height: 100%;

border: 1px solid #b3b3b3;
}

用意されたHTMLで、divを均等に上下左右10px開けるには、以上でよろしいですよ。お試しください。
bodyとcontainerが両方100%になっていたのが原因です。テーブルでもありがちですね。

bodyで横幅縦幅がともに100％だったのを、上下左右マージン10pxにしました。
そして、containerを横縦100%した、と。これでブラウザを縮小してもはみ出ないです。

ちなみに検証環境はIE7です。

お礼

ご返信ありがとうございます。

たしかに・・理想な形になってます。ただ、bodyに対するmargin:10pxが、なぜにブラウザの内側に10pxのmarginが取られるかその根拠が分かりません。回答番号NO2さんの回答とは矛盾しているような・・。

そもそも、bodyにwidthを指定していないので、おそらくbodyの幅はブラウザ表示幅全体になると思います。となると、結局bodyにwidth:100%してmargin:10pxすると同じことで、理論上、ブラウザ枠をborderがはみ出してスクロールバーが出てしまいますよね？

よろしければご説明お願いします。