Неверный размер блока в html5 - как исправить?

@Ignis · Регистрация: 21.01.2013

Студворк — интернет-сервис помощи студентам

Добрый день!
Проблема такая.
Есть на сайте код:

HTML5
1
<div id="header"><img src="image.jpg" border="0"></div>

Для дива прописан только цвет фона. Размер картинки 960*160 пикселей. Все отображается нормально.
Но если странице присвоить тип html5 (добавить <!DOCTYPE html> в начало), то после картинки создается горизонтальная полоса шириной в картинку и высотой 5 пикселей с цветом фона дива.
Просмотр кода отладчиком браузера показывает вычисленную высоту блока в 165 пикселей, но никак не показывает причину появления лишних пикселей.
Если убрать дотайп, то размер становится нормальным.

В чем проблема и как ее устранить с соблюдением стандартов языка? Шаманские приемы вроде отрицательного margin или принудительного выставления высоты дива в css работают, но причину не устраняют (это как аналгин - головной боли нет, а проблема, ее вызвавшая, остается). Так в чем же причина такого странного поведения?

@AlexZaw · 21.12.2017, 15:27

CSS
1
2
3
img{
  vertical-align: middle;
}

@Ignis · 21.12.2017, 17:29 **[ТС]**

AlexZaw, а что это даст? Ну, будет 2.5 пикселя сверху и столько же снизу (реально по 2 и 3, т.е. тоже не ровно). Но мне нужно, чтобы этой полосы не было вообще! Откуда она берется? Почему ее нет в html4?

@AlexZaw · 21.12.2017, 19:40

Попробуйте, полосы не будет.
А появляется она потому, что по умолчанию тег img имеет свойства строчного элемента, что в свою очередь означает, что элемент будет выравниваться по базовой линии текста. Эта линия располагается чуть выше нижнего края блока, так как для текста существует обязательный запас- место под «хвосты» букв.

Так же поможет указание display:block; для картинки.

@Ignis · 21.12.2017, 22:17 **[ТС]**

Сообщение от AlexZaw

Так же поможет указание display:block; для картинки.

Действительно, помогло! Спасибо! Я почему-то думал, что картинка по-умолчанию имеет этот атрибут и в голову не пришло копать здесь... Тем более, что без признака html5 все работало и никаких полос не было. Видимо, это характерная черта html5? Не знал...
P.S. Подпись у Вас интересная...

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

@Ignis 104 / 20 / 2 Регистрация: 21.01.2013 Сообщений: 253
	21.12.2017, 17:29 [ТС]
	AlexZaw, а что это даст? Ну, будет 2.5 пикселя сверху и столько же снизу (реально по 2 и 3, т.е. тоже не ровно). Но мне нужно, чтобы этой полосы не было вообще! Откуда она берется? Почему ее нет в html4? 0

@AlexZaw Модератор 2380 / 1740 / 677 Регистрация: 07.08.2016 Сообщений: 4,094
	21.12.2017, 19:40
	Попробуйте, полосы не будет. А появляется она потому, что по умолчанию тег img имеет свойства строчного элемента, что в свою очередь означает, что элемент будет выравниваться по базовой линии текста. Эта линия располагается чуть выше нижнего края блока, так как для текста существует обязательный запас- место под «хвосты» букв. Так же поможет указание `display:block;` для картинки. 1