1

これは私を夢中にさせているので、画像が背景色のdiv /セル内に配置されているときに、画像の下に狭い下マージンが追加される理由を誰かが説明できるかどうか尋ねようと思いました. コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>Problem</title>
</head>

<style type="text/css">
.color_table {
    background-color: #8c0067;
    width: 200px;
    align: center;
}
.color_div {
    background-color: #8c0067;
    width: 200px;
}
</style>

<body>

<table>
<tr>
<td class="color_table">
<img src="http://www.gravatar.com/avatar/4253171452772bb013319698f2ddbfc4?s=128&d=identicon&r=PG">
</td>
</tr>
</table>

<hr>

<div class="color_div">
<img src="http://www.gravatar.com/avatar/4253171452772bb013319698f2ddbfc4?s=128&d=identicon&r=PG">
</div>

</body>
</html>

doctype 行の div と td を削除すると、期待どおりに機能します。つまり、画像の下に余白が表示されません。

4

2 に答える 2

0

解決

/* place in your css or between <style> */
img {
   vertical-align: top;   
}

どうしてこれなの？

画像の横にテキストを配置すると、問題が表示されます。文字 yg j により、行の間隔が広がっています。そのため、画像にスペースがあります。

この例では、私が何を意味するかがわかります

http://jsfiddle.net/UrxmN/2/

于 2013-04-11T14:51:39.660 に答える
0

ページの下部にパディングが表示されるという問題がありました

img { display:block ; }

上記をcssファイルに書くと、私の問題は解決しました。これが他の人に役立つことを願っています

于 2013-08-12T12:01:24.057 に答える