143

ウェブサイトを

<!DOCTYPE HTML>

DIV 内にラップされたすべての img 要素には、CSS でマージンが定義されていなくても、3px の下マージンがあります。言い換えれば、その 3px の下マージンの原因となっているスタイル属性はありません。

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

ここで、haha.jpg が 50x50 で、.placeholder が display: table に設定されているとします。奇妙なことに、私の観察では .placeholder の高さの寸法は 50x53 です...

以前にこの異常に遭遇して修正した人はいますか?

編集

これがJS FIDDLEです

http://jsfiddle.net/fRpK6/

4

11 に答える 11

307

この問題は、画像がテキストの文字のように振る舞う (そのため、"y" または "g" のぶら下がっている部分が入るスペースをその下に残す) ことによって引き起こされ、vertical-alignCSS プロパティを使用して、そうでないことを示すことによって解決されます。このようなスペースが必要です。のほとんどすべての値で十分vertical-alignです。が好きですmiddle、個人的に。

img {
    vertical-align: middle;
}

jsFiddle: http://jsfiddle.net/fRpK6/1/

于 2012-06-01T04:13:43.283 に答える
25

多くの場合、画像要素を指定するdisplay:blockか、必要に応じてこれを解決display:inline-blockします。

于 2012-06-01T04:23:05.120 に答える
6

それは私の問題を解決しました。

line-height: 0;
于 2013-12-08T00:28:35.927 に答える
1

なぜそれが起こるのか正確な説明はわかりませんが、プレースホルダーに div font-size: 0px; を与えてください。

.placeholder {
    font-size: 0px;
}
于 2012-06-01T04:05:17.413 に答える
0

正確な問題はわかりませんが、最初にimgタグにクラスを適用し、次にフォントサイズ0ピクセルを適用する2つの異なるオプションでこれを試しました。

http://jsfiddle.net/fRpK6/3/

于 2012-06-01T04:27:29.483 に答える
0

積み上げでも発生します。プロパティdivsを追加するだけです。float例：

<body>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
</body>

問題のある CSS:

.piledUpDiv{
    width:100%;
    display:inline-block;   
 }

解決：

.piledUpDiv{
    width:100%;
    display:inline-block;
    float:left; 
 }
于 2014-03-27T22:43:42.300 に答える