Html, css - странный невидимый край ниже картин

im собирается бананы здесь, как-то ниже всех моих изображений на моей странице есть пробел, разница который не существует в коде. Даже 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;
}

Ответ 1

На самом деле это не так уж редко. Это потому, что изображение является встроенным элементом, поэтому между нижней частью изображения есть какое-то пространство, которое помещается в базовую строку текста и в нижней части текстовой строки.

Самое простое решение для этого - просто использовать display:block;, чтобы превратить изображение в элемент блока. Плавающее изображение с помощью float:left; или float:right; также работает так же, как и превращает его в элемент блока.

Регулировка свойств, таких как vertical-align, font-size и line-height, также может влиять на расстояние, но она не такая надежная, как на самом деле не снимает эффект. Он может появиться в некоторых случаях.

Ответ 2

жаль ответить на этот вопрос 3 года спустя, но эта страница находится на первой странице google, и я чувствую ответственность..... ответ: добавьте "vertical-align: top;" . тег img внутри тега a.

Ответ 3

Для меня

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

на контейнере для упаковки делал трюк.

Ответ 4

Попробуйте изменить раздел 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

Ответ 5

Ну, я понял.

это была комбинация

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