2

ブラウザの幅に合わせて拡大縮小する Web サイトを構築したいと考えています。

100% 幅の div を含む親 div が常に約 5 ピクセル高すぎることを除いて、すべて正常に動作します。背景色（青など）が下にこぼれるため、大きな問題が発生します。

何故ですか？そして、どのように解決するのですか？:-)

よろしく、ジャン

ヘッドコード:

<style type="text/css">

body { background-color:#e7e3d7; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; }    
.banner { width: 100%; }

</style>

本体コード:

<div style="background-color:#0000ff;">

<div><img class="banner" src="http://www.janriggert.com/images/footer.png"></div>

</div>

フッターの下にある青い線が見えますか? そこにあるはずがない... :-/

4

2 に答える 2

1

追加する受け入れられた答えdisplay:blockは正しいですが、その理由については説明していません。

<img>デフォルトでは に設定されていますdisplay: inline;。インライン ブロック要素は<svg>、<img>テキストのベースライン上に配置されます。それらは「一列に並んでいる」(したがってインラインである) ため、行の規則に従います。

行の下にあるテキスト文字を収容するために残された下部スペースの余分なスペース。それらはディセンダーと呼ばれ、例は「y」、「g」などのテールです。

その余分なスペースを削除するdisplay: block;には、img.

This SO answer は、多くの例を含む画像について非常によくカバーしています。

This SO answer は、同じインラインデフォルトを持つ svgs にも対応しています。

于 2021-12-17T16:42:44.843 に答える