Чому контейнер div наполягає на тому, щоб бути трохи більшим за вміст IMG або SVG?

Question 1

Я намагаюся створити ще одну лайтбокс, настільки необхідну практику 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, але div div контейнера хоче бути 640x404, різниця відображається як чорна смужка під зображенням. Div існує, щоб я міг перевести зображення в чорний, змішуючи його непрозорість до 0, поміняти його місцями, а потім знову змішати.

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

Question 2

Спроба додати:

img { display: block; }

до вашого CSS. Оскільки an <img>є вбудованим елементом за замовчуванням, його висота обчислюється по-різному, як відношення до значення висоти рядка за замовчуванням.

Для вбудованих елементів властивість CSS line-height визначає висоту, яка використовується при обчисленні висоти поля рядка.

На елементах рівня блоку line-height задає мінімальну висоту рядків у межах елемента.

Джерело: https://developer.mozilla.org/en/CSS/line-height

Question 3

Ваше зображення використовує висоту рядка свого батька. Спробуйте це:

.imagebg { line-height: 0 }

Question 4

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

vertical-align: middle;

Це використовується в Google Material Lite Lite для усунення розриву між аудіо, полотном, рамками, зображеннями, відео та дном їх контейнерів.

Lite Design Lite: https://getmdl.io

Обговорення Github: https://github.com/h5bp/html5-boilerplate/issues/440

Question 5

Окрім інших робочих відповідей, встановлення displayвластивості батьків також flexпрацювало для мене:

.imagebg { display: flex }

Question 6

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

EDIT: Ви можете сказати, що це помилка IE

Question 7

Якщо ви не хочете змінювати displayелемент, спробуйте

margin-bottom: -4px;