Почему контейнер div настаивает на том, чтобы быть немного больше, чем IMG или SVG-контент?

Я пытаюсь создать еще один лайтбокс, настолько необходимый HTML/CSS/Javascript, но я столкнулся с проблемой стиля, которая выглядит тривиальной (и, вероятно, есть!), но я просто не могу ее решить.

У меня есть div, который содержит img. Независимо от того, что я пытаюсь (border, margin, padding, авто высота и т.д.), Я просто не могу сжать div в соответствии с размерами изображения. Я уменьшил проблему до этого:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title>Layout experiments</title>

        <style type="text/css">
            #lightbox {
                margin: 0;
                padding: 0;
                position    : fixed;
                left        : 50%;
                margin-left : -320px;
                top         : 100px;
                border-radius: 22px;
                background  : #e0e0f0;
                color       : #102020;
            }

            #lightbox img {
                border-radius: 15px;
            }
            .imagebg {
                margin      : 7px;
                background  : black;
                border-radius: 15px;
                height      : 100%;
            }

        </style>

    </head>
    <body>

        <div id="lightbox">
            <div class="imagebg">
                <img src="picture.jpg">
            </div>
        </div>
    </body>
</html>

'picture.jpg' - 640x400, но контейнер-контейнер хочет быть 640x404, разница показывает себя как черная полоса ниже изображения. Div существует так, что я могу вывести изображение на черный, смещая его непрозрачность до 0, поменяйте его, а затем снова вставьте.

Я просмотрел вычисленные стили в нескольких браузерах и не вижу, откуда происходит дельта 4px.

Ответы

Ответ 1

Попытка добавления:

img { display: block; }

для вашего CSS. Поскольку <img> является встроенным элементом по умолчанию, его высота вычисляется по-разному в зависимости от значения высоты строки по умолчанию.

В встроенных элементах свойство CSS высоты строки определяет высоту, которая используется при вычислении высоты строки строки.

В элементах уровня блока высота строки определяет минимальную высоту строк в элементе.

Источник: https://developer.mozilla.org/en/CSS/line-height

Ответ 2

Ваше изображение использует высоту строки своего родителя. Попробуйте следующее:

.imagebg { line-height: 0 }

Ответ 3

попробуйте добавить:

vertical-align: middle;

Это используется в google material design lite для устранения разрыва между звуком, холстом, фреймами, изображениями, видео и нижней частью их контейнеров.

Material Design Lite: https://getmdl.io

Дискуссия Гитуба: https://github.com/h5bp/html5-boilerplate/issues/440

Ответ 4

В основном вы получаете эту ошибку в IE, хотя вы не упомянули об этом, но это факт. IE генерирует дополнительное пространство ниже тега <img>. Отсюда хорошая практика сделать образы img { display: block; }.

EDIT: вы можете сказать, что это ошибка IE

Ответ 5

Если вы не хотите изменять display элемента, попробуйте

margin-bottom: -4px;