Форум Сайтостроение Веб-строительство

Откуда пустое место между блоками

antono
На сайте с 12.07.2004
Offline
297
antono
209

Вот задачка:

Вот файл с  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http :// www. w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  в начале: http://antonoramb.temp.swtest.ru/2.html

Между двумя блоками нет пустого места как и прописано в стилях.

Другой файл, различия только в наличии  <!DOCTYPE html> вверху:  http://antonoramb.temp.swtest.ru/1.html

Откуда между блоками пустое место? 

Жорик
На сайте с 11.09.2006
Offline
201
Жорик
#1

У вас верхний блок объявлен как inline, а при этом он выравнивается по baseline (такая же беда с картинками, они тоже inline-элемент).

А зачем inline там? Либо добавьте в обоих vertical-align: top; либо объявите просто как block. А лучше flex тогда уж, больше возможностей :)

CSS Съезжают записи Без создания таблицы фото
antono
На сайте с 12.07.2004
Offline
297
antono
#2

Спасибо огромное!  vertical-align:top; самое то что нужно.

Вот вариант с display:block: http://antonoramb.temp.swtest.ru/3.html

Верхний блок почему то не растягивается по вертикали.

Вот вариант с display:flex: http://antonoramb.temp.swtest.ru/4.html

Пункты меню не переносятся.

Еще раз благодарю!

Жорик
На сайте с 11.09.2006
Offline
201
Жорик
#3

Чтобы блоки не переносились можно прописать white-space: nowrap;

Вы пишите что нужно, а мы поможем 😀

А вообще, если осваиваете вёрстку, то это велкам на MDN. 💪

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий