Свойство высотного стиля не работает в элементах div

Ответ 1

Вы не можете установить height и width для элементов с display:inline;. Вместо этого используйте display:inline-block;.

Из спецификация CSS2:

10.6.1 Встроенные, не замененные элементы

Свойство height не применяется. Высота области содержимого должна основываться на шрифте, но в этой спецификации не указывается, как это сделать. UA может, например, использовать em-box или максимальный зажим и descender шрифта. (Последнее гарантировало бы, что глифы с частями выше или ниже em-box все еще попадают в область содержимого, но приводят к коробкам разного размера для разных шрифтов, а первый гарантирует, что авторы могут контролировать стиль фона по отношению к "линии-высоте", но приводит к картине глифов вне их области содержимого.)

EDIT — Вам также не хватает терминатора ; для свойства height:

<div style="display:inline; height:20px width: 70px">My Text Here</div>
<!--                                  ^^ here                       -->

Рабочий пример: http://jsfiddle.net/FpqtJ/

Ответ 2

Это сработало для меня:

min-height: 14px;
height: 14px;

Ответ 3

Кроме того, убедитесь, что вы добавляете ";" в каждый стиль. Вы исключая их по ширине и высоте, и, хотя это может и не вызвать вашу конкретную проблему, важно закрыть ее.

<div style="height:20px; width: 70px;">My Text Here</div>

Ответ 4

Вы теряете свой атрибут height, потому что вы меняете элемент block на встроенный (теперь он будет действовать как <p>). Вероятно, вы выбрали высоту 14px из-за высоты текста внутри вашего линейного div.

Inline-блок может работать для ваших нужд, но вам, возможно, придется выполнить работу около двух для поддержки кросс-браузера.

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

Ответ 5

Установите позиционирование в абсолютное. Это немедленно решит проблему, но позже может возникнуть проблема с компоновкой. Вы всегда можете найти способ обойти их;)

Пример:

position:absolute;

Ответ 6

Вы пытаетесь установить свойство height элемента inline, что невозможно. Вы можете попытаться сделать его элементом block, или, возможно, вы хотели изменить свойство line-height?

Ответ 7

Мне сказали, что злоупотреблять им - плохая практика, но вы всегда можете добавить !important после своего кода, чтобы расставить приоритеты в свойствах css.

.p{height:400px!important;}

Ответ 8

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

.container {
    width: 22.5%;
    size: 22.5% 22.5%;
    margin-top: 0%;
    border-radius: 10px;
    background-color: floralwhite;
    display:inline-block;
    min-height: 20%;
    position: absolute;
    height: 50%;
}

Ответ 9

используйте свойство min-height. мин-высота: 20px;