web-dev-qa-db-ja.com

html、css-写真の下の奇妙な目に見えない余白

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

これまで私に起こったことはありません...!

<!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;
}
29
Gilad

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

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

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

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

78
Guffa

3年後にこの質問に答えて申し訳ありませんが、このページは最初のグーグルページにあり、私は責任を感じます.....答え:追加するだけです "vertical-align:top;"からimgタグ内aタグ。

15
user3051858

私のために

font-size: 0;
line-height: 0;

ラッピングコンテナでトリックを行いました。

6
leymannx

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

1
LRA