Почему контейнер с встроенными блоками становится слишком высоким?

У меня есть div контейнера и 5 дочерних div с

{display: inline-block}

чтобы они появлялись рядом друг с другом. Каждый из дочерних div имеет высоту 20px, но контейнер растет до высоты 24px. Почему это происходит?

Fiddle: http://jsfiddle.net/VHkNx/

5 ответов

Элементы строкового блока по-прежнему занимают размер строки/размер шрифта. Поэтому добавьте это:

line-height: 0;

to #container исправит его.

Demo

Попробуйте перед покупкой


Когда вы используете дисплей inline-block, ваши элементы ведут себя аналогично словам и буквам. Пробелы и высоты линий также отображаются, и это может привести к неожиданным результатам.

Один из способов решения этой проблемы - предоставить настройку контейнера font-size: 0 (конечно, вы все равно можете дать дочерним элементам свои собственные font size).

jsFiddle Demo

  • P.S - line-height: 0 также будет работать.


Один простой способ исправить это - добавить vertical-align: top к дочерним элементам:

.thing {
 vertical-align: top;
 display: inline-block;
 background-color: Red;
 height: 20px;
 width: 18%;
 margin-left: 1.25%;
 margin-right: 1.25%;
}

Таким образом, вам не нужно настраивать высоту линии или размер шрифта.

Как отмечалось ранее, аналогичный макет можно реализовать с помощью поплавков. Оба подхода действительны. См. Демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/74Y2V/


Элементы встроенного блока помещаются как блок на базовой строке текстовой строки, так как они являются встроенными элементами, поэтому это пространство от базовой линии до нижней части текстовой строки, которая занимает пробел.

Вы можете использовать плавающие элементы вместо встроенных элементов:

#container {
 background-color: Green;
 width: 500px;
 overflow: hidden;
}
.thing {
 float: left;
 background-color: Red;
 height: 20px;
 width: 18%;
 margin-left: 1.25%;
 margin-right: 1.25%;
}
#first {margin-left: 0px;}
#last {margin-right: 0px;}

Демо: http://jsfiddle.net/VHkNx/2/


Самый простой способ - не показывать им: встроенный блок, но использовать float: left;, Все элементы будут плавать рядом друг с другом. Удачи!

licensed under cc by-sa 3.0 with attribution.