Я не могу понять, почему использование display:inline-block приведет к тому, что этот элемент <div> каким-то образом набирает высоту, когда его содержащий элемент был скрыт. Это не происходит с display:block.
HTML:
<div style="display:inline-block;"><input type="hidden" /></div>
<div>Gap above created by inline-block</div>
<div style="display:block;"><input type="hidden" /></div>
<div>No gap above if using block</div>
Почему display:inline-block вызывает пробел, изображенный здесь?
Хорошо, как уже было сказано очень кратко в комментариях:
встроенный блок
Это значение заставляет элемент генерировать блок встроенного уровня контейнер. Внутренняя часть встроенного блока форматируется как блок-блок, и сам элемент форматируется как атомный ящик на уровне строки.
рядный
Это значение заставляет элемент генерировать одно или несколько встроенных полей.
Самой важной частью этой темы было бы то, что сам элемент будет отформатирован не только для содержимого. Каждый элемент встроенного блока будет отображаться как атомный встроенный блок и, таким образом, занимает пробел.
Источник: http://www.w3.org/TR/CSS2/visuren.html#inline-boxes
Одна вещь, которая возникает при создании display:inline-block, заключается в том, что вычисления line-height будут изменены:
В контексте форматирования форматирования поля выкладываются горизонтально, один после другого, начиная с верхней части содержащего блока. Горизонтальные поля, границы и отступы соблюдаются между этими коробки. Ящики могут быть выровнены по вертикали по-разному: их днища или вершины могут быть выровнены, или исходные тексты внутри нихмогут быть выровнены.
источник: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Вычисляется высота каждого окна встроенного уровня в поле строки. Для замененные элементы, элементы встроенного блока и элементы встроенных таблиц, это высота их поля поля; для встроенных ящиков это их "высота линии".
источник: http://www.w3.org/TR/CSS2/visudet.html#line-height
CSS предполагает, что каждый шрифт имеет метрики шрифта, которые определяют характерную высоту над базовой линией и глубину ниже нее. В этом мы используем A для обозначения высоты (для данного шрифта при заданном размер) и D глубина. Мы также определяем AD = A + D, расстояние от сверху вниз.
источник: http://www.w3.org/TR/CSS2/visudet.html#inline-box-height
Таким образом, высота линии будет определяться по типу шрифтов. Однако, когда inline-block пуст, он будет иметь базовый line-height. Однако он все же пытается сгенерировать свой line-height шрифтом.
Чтобы быстро исправить это, вы можете использовать оболочку, которая определяет эксклюзивность, что шрифт отсутствует, поэтому нет line-height, который не приводит к высоте:
.wrapper
{
font-size: 0;
}
Где вы можете reset это свойство в своем inline-block:
.wrapper div
{
font-size: medium;
}
Если значение по умолчанию font-size является средним.
Таким образом, вы все равно можете использовать контент в inline-block без пробелов.
Это обновление из-за комментарий Кевина Уилерса
... Я смущен, он все равно никогда не говорит, что такое высота пустого элемента встроенного блока....
Я хочу отметить, что я не нашел официальной документации об этом, хотя через тестирование я нашел общие шаблоны.
Подумайте об этом, так как inline-block ожидает контент и резервирует минимальное пространство на основе известного line-height.
JsFiddle как более понятный пример
Как вы видите, gab высоты inline-block основан на line-height, который мы определили в первом сообщении.
Теперь, откуда этот line-height?
Он наследуется от первого, который определяет элемент line-height: <body>.
Вы можете проверить это мои изменяющиеся font-size, font-family или line-height элемента <body>.
Таким образом, он сохраняет line-box для него. Странно, что это видно вообще, как вы можете видеть в соответствии с спецификациями W3 встроенного форматирования:
Линейные ящики, которые не содержат текста, не сохраняют пробел, не имеют встроенных элементов с ненулевыми полями, отступом или границами и никаким другим содержимым в потоке (например, изображениями, встроенными блоками или встроенными таблицами) и не делают а не конец с сохраненной новой строкой, должны рассматриваться как линии с нулевой высотой для целей определения позиций любых элементов внутри них и должны рассматриваться как не существующие для каких-либо других целей.
Он делает это для каждого другого элемента внутри inline-block, но всегда кажется, что он резервирует минимальное пространство.
По-видимому, для display:inline-block для по умолчанию устанавливается визуальный height на основе его родительского line-height. Решение создает родительскую оболочку с такими свойствами:
#container {
line-height:0;
}
Демо http://jsfiddle.net/FE3Gy/33/. Здесь вы можете проверить пример с разными значениями font-size.
Усыновление к W3:
Внутренняя часть встроенного блока отформатирована как блок-блок, а сам элемент форматируется как атомный встроенный блок.
О встроенном поле
Ширина строки строки определяется содержащим блоком и наличием поплавков. Высота строки строки определяется правилами, указанными в разделе "Расчет высоты строки".
Итак, вы можете узнать больше о line-height здесь:
Вы получите фактическую строку, есть ли у вас скрытый ввод или пробел или что-то еще - ваш браузер считает его встроенным, поэтому он получает строку.
<div style="display:inline-block;"> </div><div>Gap above created by inline-block</div>
<div style="display:block;"><input type="hidden" /></div>
<div>No gap above if using block</div>
Даже если у вас нет абсолютно ничего, вы получите строку. display: inline-block превращает его в встроенный контент.
У Layne и Nate есть правильный ответ, но я хотел обратить ваше внимание на этот раздел из спецификации CSS 2.1, раздел 9.4.2.
Строковые поля создаются по мере необходимости для хранения содержимого на уровне строки внутри контекст форматирования. Линейные поля, которые не содержат текста, нет сохраненное пустое пространство, не встроенные элементы с ненулевыми полями, заполнение или границы, а также другое содержимое в потоке (например, изображения, встроенные блоки или встроенные таблицы), и не заканчиваются сохраненными newline следует рассматривать как линейные боксы нулевой высоты для целей определяя позиции любых элементов внутри них и должны быть считаются не существующими для каких-либо других целей.
Пролисты (inline элементы), которые не имеют содержимого в потоке (<input type="hidden" /> is display:none, поэтому не могут рассматриваться как содержимое в потоке) соответствуют этим критериям, поэтому их содержащие линейные строки обрабатываются как 0 height или несуществующие. Элементы inline-block явно исключены из соответствия этим критериям, поэтому элемент встроенного блока создает поле строки, которое должно быть высоким по высоте.
Обратите внимание, что вы можете видеть это в действии другим способом, добавив границу к элементу span, чтобы он не соответствовал вышеуказанным критериям. См. http://jsfiddle.net/FE3Gy/36/
display: inline-block имеет другое поведение, чем отображение: block. Пока блок создает элемент box, встроенный блок создает поле, но он добавляет некоторый окружающий контент, как если бы это был единственный встроенный элемент. Этот окружающий контент может стать источником вашей проблемы. Я думаю, если у вас нет особых причин использовать встроенный блок, вы должны использовать display: block.
Как упоминалось выше @nkmol, его значение не имеет размер шрифта по умолчанию и высоту строки, вызывая ненужную высоту для родителя. В некоторых случаях строка-высота: 0 решает проблему. Но иногда, в исключительных случаях, таких как пустой тег внутри родительского
<div>
<a href=''></a>
</div>
Я выше случая, просто установив размер шрифта: 0 или line-height: 0 не решает проблему как тег.
vertical-align: middle;
устраняет проблему в этом случае.