Почему установка высоты строки для одного из двух div-элементов inline-block влияет на оба div?

Question

У меня есть следующее:

<div>
    <div style="display:inline-block; ">div_1</div>
    <div style="display:inline-block; line-height:20px;">div_2</div>
</div>

Почему свойство свойства line-height, установленное для второго div, также влияет на первый div?И как исправить это, мне нужно только, чтобы второй div был обработан высотой строки, потому что мне нужно указать другой line-height для первого div. Заранее спасибо.

ОБНОВЛЕНИЕ:

Проверка jsFiddle.

Answer 1

В тестовом кейсе теперь кристально ясно.

Добавьте vertical-align: top к первому div:

<div style="display:inline-block; line-height:24px; vertical-align: top" id="div_1">div_1</div>

Фиксированная версия: http://jsfiddle.net/my6Su/5/

Прочтите это, чтобы понять связь между display: inline-block и vertical-align: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Также полезно, для наглядной демонстрации:
http://www.brunildo.org/test/inline-block.html

Answer 2

Во-первых, эффект line-height действует только на встроенные элементы. Когда line-height применяется к блоку , встроенному блоку или любому другому типу элемента, который не является встроенным, эффекты действуют только на встроенные элементы-потомки .

Во-вторых, в линейном блоке (абстрактном блоке, включающем встроенные элементы в линию), все встроенные элементы выравниваются вдоль базовой линии. Когда вы изменяете высоту строки для второго элемента div, он добавляет половину ведущей вверху (и внизу) этого встроенного элемента. А верхняя половина ведущей толкает базовую линию ниже, что, в свою очередь, перемещает первый делитель ниже.

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

Answer 3

<div>
    <div style="display:inline-block; line-height:10px;">div_1</div>
    <div style="display:inline-block; line-height:20px;">div_2</div>
</div>

попробуй это. это будет работать.