Unstyled DIV с VIDEO ребенок имеет более высокий рост, чем должен

Question

По какой-то причине базовый элемент без стилей DIV имеет дополнительную высоту, прикрепленную к нижней части, когда он содержит элемент VIDEO (и, возможно, другие элементы - я не тестировал многие типы).

<div><video src="my_movie.ogv"></video></div>

Iиметь приведенную выше строку кода в базовом HTML-файле.С помощью Firefox или Safari / Chrome (если я, конечно, вместо этого использую файл .mp4), я вижу, что вычисленная высота элемента DIV где-то на 2-5 пикселей больше, чем высота элемента VIDEO.

Это не похоже на ожидаемое и преднамеренное поведение.Например, если я добавлю туда элемент P вместо элемента VIDEO, у DIV не будет никакой дополнительной высоты.

Кто-нибудь знает, почему браузеры отображают эту конфигурацию элементов DOM в этомспособ

Answer 1

Если ваша разметка такая же, как и выше, и к ней не применены специальные стили, то поведение, которое вы видите, требуется для блочной модели CSS; пробел - это размер спуска шрифта, потому что нижняя часть видео по умолчанию размещается на базовой линии, а не внизу текста. В частности, см. https://bugzilla.mozilla.org/show_bug.cgi?id=22274#c55 для объяснения в терминах спецификации и https://bugzilla.mozilla.org/show_bug.cgi?id=22274#c37 для того, как избавиться от места, если хотите. Вы также можете установить высоту строки в блоке на 0, чтобы избавиться от пробела; какой подход вы выберете, зависит от других конструктивных ограничений.