9

インライン要素とブロック要素がどのように機能するかを理解していると思っていましたが、これは私を驚かせました。問題の修正を見つけましたが、なぜそれが機能するのかわかりません。

何らかの理由で a のimg中にあるdiv場合、 div は3.5px画像よりも背が高いようです。ただし、画像をブロック要素として設定すると、この余分な高さがなくなります。

基本的な HTML:

<div id="wrapper">
        <img src="http://www.basini.com/wp-content/uploads/2013/02/seeing-in-the-dark.jpg" width="300" height="230"  />
</div>

そしてCSS：

#wrapper {
    background: orange;
}
#wrapper img {
    /* display: block; this will remove the extra height */
}

効果を実証するためにjsfiddleを設定しました

なぜこれが起こり、「img」をブロック要素にすることで修正されるのですか? 他の解決策はありますか？

4

3 に答える 3

10

デフォルトでは、画像は文字のようにインラインでレンダリングされます。

a、b、c、dと同じ線上にあります。

その線の下には、j、p、qなどの文字にある子孫のためのスペースがあります。

画像の垂直方向の配置を調整して、画像を別の場所に配置できます。

于 2013-03-12T09:05:05.633 に答える
2

タグのline-height巻き方によるものです。divimg

それを修正するにはline-height:0、div、floatimg、または imgに設定できますdisplay:block。

より良い説明：インラインとしてスタイルされた <p> で行の高さを制御する方法

于 2013-03-12T09:11:27.393 に答える
0

すべてのスタイルをリセットしようとしましたか? 新しいスタイルを適用する前に?

于 2013-03-12T09:06:09.970 に答える