Почему высота линии добавляет дополнительную высоту?

<div><iframe style="height: 100px"></iframe></div> 
<div style="line-height: 0"><iframe style="height: 100px"></iframe></div>

http://jsfiddle.net/p6SD4/Почему высота линии добавляет дополнительную высоту?

Если вы осмотрите DOM вы можете увидеть, что первый DIV имеет высоту 108px, пока она 104px на второй. Iframe с границами составляет 104px, так почему он добавляет 4 дополнительных пикселя, когда установлена высота линии?

Протестировано на Chrome 28.0.1500.71 для Mac.

источник

2013-07-18 user1767586

на самом деле добавляет 4 пикселя, когда высота линии НЕ установлена ... в этом вопросе вы ошибаетесь (вы сказали, что первый div больше второго, но добавляет пиксели? –

@Qreatives Я установил его в 0 во втором div. Это «line-height: normal;» в первом. – user1767586

Спасибо @Adrift. Это, наверное, то, что я хотел, да. Не знаю, почему это работает. – user1767586

Потому что iframe сидят на базовой линии. Но div должен быть достаточно высоким, чтобы содержать также strut, который падает ниже базовой линии и высота которого определяется высотой линии.

0 line-height = 0px высота стойки = 0px стойки ниже базовой линии.

Используйте iframe { display:block; } или iframe { vertical-align:top; } или iframe { vertical-align:bottom; }, чтобы это не произошло.

(дисплей: блок останавливает создание окна линии, поэтому нет стойки. Vertical-align: верхняя и вертикальная выровненности: снизу освобождают стойку от обмена базовой линией линии с iframe, поэтому стойка get Обратите внимание, что если высота линии больше, чем высота iframe, стойка заставит высоту линейной строки и, следовательно, высоту div по-прежнему будет больше, чем iframe height, независимо от установки вертикального выравнивания)

источник

2013-07-18 12:53:46 Alohci

Оба divs, по-видимому, имеют диаметр 109 пикселей в Chrome 28. Имейте в виду, что значение по умолчанию для элемента и всех встроенных элементов - это базовая линия - изменение этого снизу выравнивает оба элемента, как вы, вероятно, ожидали.

http://jsfiddle.net/p6SD4/1/

источник

2013-07-18 12:42:11 Adrift

Это может зависеть от вашего браузера. В Firefox и Chrome оба элемента IFRAME имеют высоту 104 пикселя (100 пикселей + 4 пикселя границы).

Какой браузер вы используете? Вы пробовали с border = "0"?

источник

2013-07-18 12:45:45 olvlvl

Использование Chrome 28.0.1500.71 для Mac. Удаление границы не создает различий. Спасибо за предложение. – user1767586

Я использую 28.0.1500.72 на ПК, и это правильно. Странный. – olvlvl

К сожалению, в первый раз я не видел несоответствий между Chrome для Mac и Chrome для ПК. Как будто разных браузеров было недостаточно ... – user1767586

Почему высота линии добавляет дополнительную высоту?

ответ

Смежные вопросы