32

ここでバナナを使用します。ページ内のすべての画像の下にギャップがあり、コードにはないマージンがあります。Firebugでさえそれを見ることができませんが、FirefoxとSafariはそれをレンダリングしています-CSSがまったくなくても！

これは私には今までに一度も起こりませんでした...！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Paranoid</title>
<link rel="stylesheet" href="includes/style.css" type="text/css" />
</head>
<body>

    <div id="container">
        <div id="sidebar">
            <img src="images/logo.png" id="logo" />
            <ul id="menu">
                <li class="menu1">Main</li>
                <li class="menu1">System</li>
                <li class="menu1">View</li>
                <li class="menu1">Policy</li>
            </ul>
            <div id="sidebar_bottom"></div>
        </div>
        <div id="main_content"></div>
        <div class="clear"></div>
    </div>

</body>
</html>

body{
    background: #497e9f url(../images/bg.png) repeat-x top;
}
#container{
    width:864px;
    margin: 8px auto 0 auto;
}
#sidebar{
    /*width:139px;*/
    float: left;
}
#sidebar_bottom{
    height:10px;
    background: url(../images/sidebar_bottom_bg.png) bottom left no-repeat;
}
#sidebar #logo{
    margin-bottom: 2px;
}
#sidebar #menu{
    background: #f2f2f2;
    border: 0 1px solid #cecece;
    margin: 0;
    list-style: none;
}
4

5 に答える 5

87

これは実際にはそれほど珍しいことではありません。これは、画像がインライン要素であるため、テキストのベースラインに配置された画像の下部とテキスト行の下部の間にいくらかのスペースがあるためです。

これに対する最も簡単な解決策は、単純に を使用display:block;して画像をブロック要素に変換することです。float:left;orを使用して画像をフローティングするfloat:right;と、ブロック要素にもなります。

vertical-align、 、font-sizeなどのプロパティを調整するとline-height、距離にも影響する可能性がありますが、効果が実際に除去されないため、堅牢ではありません。状況によってはまだ表示される場合があります。

関連する質問:
XHTML 1.0 Strict の画像の下に不要なスペース
があるのはなぜですか?
IE 画像の間隔の問題

于 2009-09-05T12:25:00.523 に答える
1

DOCTYPE セクションを次のように変更してみてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

これも確認できます: http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails

于 2012-09-28T01:28:20.880 に答える
-3

さて、私はそれを手に入れました。

の組み合わせでした

font-size: 0px;
line-height: 1;
于 2009-09-05T11:20:48.110 に答える