Пустой div vs div с текстом, имеющим свойство inline-block

Ответ 1

В основном это связано с тем, как вычисляется значение vertical-align:. Поэтому, если вы установите вертикальное выравнивание: bottom; атрибут в css, то вы заметите, что он будет таким же с текстом и без него.

вы можете прочитать это для более подробной информации.

Когда у div нет содержимого, в поле не накладывается отступы (т.е. когда 0, если есть контент, браузер вычисляет, где будет заполнение). поэтому есть небольшая разница в вычислении с текстом и без него.

Надеюсь, что это полезно.

Ответ 2

Привет, см. здесь: http://jsfiddle.net/dd24z/ по умолчанию текст вертикально-выравнивается вверх, но вы можете изменить это поведение;

div {
    display: inline-block;
    margin-right: 2px;
    width: 20px;
    background-color: red;
    vertical-align: bottom;
}

http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height

'vertical-align': базовый Совместите базовую линию с базой исходного поля. Если поле не имеет базовой линии, выровняйте нижнюю часть поля с исходной базой.

Ответ 3

Добавить

vertical-align: bottom;

для вашего CSS. Надеюсь, он работает так, как вы хотите.

Ответ 4

Я думаю, это можно объяснить выравниванием текста, независимо от div.

Текст, помещенный в div, по умолчанию по вертикали выровнен по левому краю. Эти divs без текста выравниваются рядом друг с другом (встроенный блок), расширяя страницу вниз. Если вы добавите еще один div, вы увидите, что второй заголовок идет дальше.

<h1>Empty div</h1>
Some text
    <div style="height:20px;"></div>
    <div style="height:40px;"></div>
    <div style="height:60px;"></div>
    <div style="height:80px;"></div>
continuing here

<h2>Div with text</h2>
Some text 
    <div style="height:20px;">20</div>
    <div style="height:40px;">40</div>
    <div style="height:60px;">60</div>
    <div style="height:80px;">80</div>
continuing here

...

div {
       display: inline-block;
       margin-right: 2px;
       width: 20px;
       background-color: red;
    }

Fiddle

В приведенной выше скрипте вы можете видеть, что текстовая строка является "ориентиром".

Возможно, это объяснение: после того, как у div есть текст в них, они выровнят его с окружающим текстом и, если они не будут существовать, затем выровнят их нижнюю строку.

Извините, может быть, не очень понятно, но надеюсь, вы понимаете мое мнение.