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

Question

Я устанавливаю высоту 20 пикселей на <div>хотя при рендеринге в браузере его высота составляет всего 14 пикселей.

Есть идеи?

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

Answer 1

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

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

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

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

РЕДАКТИРОВАТЬ - Вы также пропускаете ; терминатор для height имущество:

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

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

Answer 2

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

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

Answer 3

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

Пример:

position:absolute;

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

.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%;
}

Answer 7

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

.p{height:400px!important;}

Answer 8

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

Answer 9

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