Высота пролета в Firefox

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

Однако следует быть осторожным в том, что Firefox 2 не поддерживает это свойство. Firefox 3 является первым браузером на базе Mozilla, поддерживающим это свойство. Все другие браузеры поддерживают это свойство, включая Internet Explorer.

Имейте в виду, что inline-block не позволяет установить выравнивание текста внутри элемента на Firefox, если он работает в режиме quirks. Все другие браузеры позволяют это, насколько я знаю. Если вы хотите установить выравнивание текста во время работы в режиме quirks, вам придется использовать свойство -moz-inline-stack вместо inline-block . Имейте в виду, что это свойство только для Mozilla, поэтому вам придется сделать некоторое обнаружение браузера, чтобы убедиться, что только Mozilla получает это, в то время как другие браузеры получают стандартный inline-block .

Встроенные элементы не могут иметь такую высоту (или ширину). SPANs уже являются display: inline по умолчанию. Internet Explorer на самом деле сломанный браузер в этом случае.

<style>
#div1 { float:left; height:20px; width:20px; }
#div2 { float:left; height:30px; width:30px }
</style>

<div id="div1">FirstDiv</div>
<div id="div2">SecondDiv</div>

Пока контейнер для того, что держит div 1 и 2, достаточно широк, чтобы они могли поместиться, это должно быть хорошо.

Поскольку вы отображаете его встроенным, высота должна быть установлена на высоте вашего атрибута line-height.

В зависимости от того, как он выложен, вы всегда можете использовать float:left или float:right на span/div, чтобы предотвратить разрыв линии. Но если вы хотите, чтобы это было в середине предложения, то этот вариант исключен.

Высоту (и ширину) элемента span можно изменить только в том случае, если он имеет значение display: block; . Это происходит потому, что обычно это встроенный элемент. div обычно имеет значение display: block; .

Решением может быть использование:

<div style="background: #f00;">
    Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>

Проблема заключается в том, что 'display: inline' не может получить ассоциированную высоту, потому что, будучи встроенным, он получает свою высоту из своего содержимого. В любом случае, как вы определяете высоту коробки, которая разбивается в конце строки?

Вы можете попробовать установить вместо этого 'line-height', или если это не работает к вашему удовлетворению, установите заполнение:

/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;

Для того чтобы задать высоту пролета следующее должно работать в firefox

span {
  display: block;
  height: 50px;
}

height в em = relative line-height

например height:1.1em с line-height:1.1

= 100% заполнено

выравнивание текста внутри элемента можно настроить с помощью атрибутов padding и block-inline. display:inline-block; padding-top:3px; например