Свойство height | CSS справочник
CSS свойстваОпределение и применение
CSS свойство height устанавливает высоту области содержимого элемента. Свойства min-height и max-height могут переопределить высоту.
CSS свойство height не включает в себя отступы (padding), границы (border) и поля (margin):
- Общая высота элемента вычисляется по формуле:
height (высота) + padding-top (верхний отступ) + padding-bottom(нижний отступ) + border-top (верхняя граница) + border-bottom(нижняя граница). - Общая ширина элемента вычисляется по формуле:
width (ширина) + padding-left (левый отступ) + padding-right(правый отступ) + border-left (левая граница) + border-right(правая граница).
Поддержка браузерами
CSS синтаксис:
height:"auto | length | initial | inherit";
JavaScript синтаксис:
object.style.height = "100px"
Значения свойства
| Значение | Описание |
|---|---|
| auto | Браузер вычисляет высоту самостоятельно. |
| length | Определяет высоту в пикселях, см и др. |
| % | Определяет высоту в процентах от содержащего блока родительского элемента. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1Наследуется
Нет.Анимируемое
Да.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Свойства height и width.</title>
<style>
.primer1 {
width :25px; /* задаём ширину блока */
height :25px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer2 {
width :50px; /* задаём ширину блока */
height :50px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer3 {
width :75px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer4 {
width :100px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer5 {
width :125px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
</style>
</head>
<body>
<div class = "primer1"></div>
<div class = "primer2"></div>
<div class = "primer3"></div>
<div class = "primer4"></div>
<div class = "primer5"></div>
</body>
</html>
Пример использования свойств height и width.CSS свойстваheight | CSS | WebReference
Устанавливает высоту содержимого элемента. По умолчанию высота определяется автоматически, исходя из содержимого элемента, но если задать фиксированное значение высоты, то она будет установлена, несмотря на объём содержимого. Если содержимое элемента превышает указанное значение высоты, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте свойство overflow со значением auto к стилю элемента.
Если для элемента свойство box-sizing задано как border-box, то height определяет высоту блока.
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, за исключением строчных, колонок таблицы |
| Анимируется | Да |
Синтаксис ?
height: <размер> | <проценты> | autoОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота вычисляется в зависимости от значения height у родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. Если высота у родителя явно не определена, то применяется значение auto, оно устанавливает высоту исходя из содержимого элемента.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>height</title>
<style>
.layer {
height: 50px; /* Высота блока */
overflow: scroll; /* Добавляем полосы прокрутки */
background: #fc0; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
}
</style>
</head>
<body>
<div>
Чернозём, в сочетании с традиционными
агротехническими приемами, локально снижает фраджипэн.
Суглинок перманентно растворяет биокосный краснозём
в полном соответствии с законом Дарси.
</div>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства height
Объектная модель
Объект.style.height
Примечание
Браузер Internet Explorer до версии 7 некорректно определяет height как min-height.
Браузер Internet Explorer 8 неверно отображает элемент при добавлении overflow со значениями auto и scroll.
В режиме совместимости (quirk mode) Internet Explorer до версии 7 включительно неправильно вычисляет высоту элемента, не добавляя к ней значения padding и border.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
height | CSS справочник
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 7.0+ | 1.0+ |
Описание
CSS свойство height устанавливает высоту области содержимого элемента.
Если содержимое превышает заданную высоту области содержимого, оно будет выходить за границу элемента. Для того, чтобы содержимое оставалось в пределах границ элемента, можно воспользоваться свойством overflow или overflow-y, в этом случае, если содержимое будет превышать заданную высоту, появится полоса прокрутки. Чтобы визуально увидеть, когда содержимое выходит за границу элемента, можно к примеру установить фон или рамку для элемента.
Общая высота элемента вычисляется по формуле: height + padding (верхний и нижний) + border (верхний и нижний). Например, если вы зададите: height: 500px, padding: 5px, border 1px, то общая высота элемента получится 512px.
Примечание: свойство height работает только с картинками и блочными элементами.
| Значение по умолчанию: | auto |
|---|---|
| Применяется: | ко всем элементам, кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.height=»50px» |
Синтаксис
height: auto|величина|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| auto | Высота области содержимого устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы в элементе уместилось всё содержимое. |
| величина | Определяет высоту в единицах измерения CSS. |
| % | Высота указывается в процентах и высчитывается в зависимости от высоты области содержимого родительского элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
img.normal { height: auto; }
img.big { height: 120px; }
</style>
</head>
<body>
<img src="logocss.gif"><br>
<img src="logocss.gif">
</body>
</html>
Результат данного примера в окне браузера:
перевод, произношение, транскрипция, примеры использования
Вес увеличивается пропорционально росту. ☰
The plane was rapidly losing height. 
Самолёт быстро терял высоту. ☰
She’s of medium height.
Она среднего роста. ☰
It’s the height of chic this year.
В этом году это писк моды. ☰
at the height of her career
на пике своей карьеры ☰
Height is a function of age.
Рост зависит от возраста. ☰
We were measured for height and weight.
Они измерили наш рост и вес. ☰
There is no evidence correlating height and intelligence.
Нет никаких доказательств связи роста с уровнем интеллекта. ☰
It was a miracle that he survived the drop from that height.
Просто чудо, что он выжил после падения с такой высоты. ☰
I was surprised by his height.
Я была удивлена его ростом. ☰
Rome at the height of its glory
Рим в апогее своей славы ☰
Dick has already passed his father in height.
Дик уже выше своего отца. ☰
He was in his late twenties and of average height.
Роста он был среднего, чуть младше тридцати лет. ☰
Rachel had always been scared of heights.
Рэйчел всегда боялась высоты. ☰
Its minimum height from the sea is 900 feet.
Его минимальная высота над уровнем моря — 900 футов. ☰
They did not carry this tower to the height it now is.
Они не достроили башню до той высоты, какую она имеет сейчас. ☰
At that time, the Beatles were at the height of their fame.
В то время «Битлз» были на пике своей славы. ☰
of average height for his age
среднего роста для своего возраста ☰
I make the height about 100 feet.
По моим расчётам /прикидкам/, высота — около ста футов. ☰
The Beatles were at the height of their fame.
Группа «Битлз» была на вершине своей славы. ☰
Sam’s about the same height as his sister now.
Сэм сейчас примерно одного роста со своей сестрой. ☰
Her feet are small in proportion to her height.
Её ступни небольшие по соотношению с ростом. ☰
In the driving seat sat a man of average height.
На месте водителя сидел мужчина среднего роста. ☰
Sunflowers can grow to a height of fifteen feet.
Подсолнухи могут вырасти до высоты в пятнадцать футов. ☰
Свойство line-height | CSS справочник
CSS свойстваОпределение и применение
При работе с текстом зачастую возникает необходимость расположить строки абзаца ближе друг к другу, либо их растянуть. Расстояние между базовыми линиями соседних строк называется интерлиньяж, или междустрочный интервал.
В CSS за междустрочный интервал отвечает свойство line-height (высота строки). Чем выше значение этого свойства, тем больше промежуток между строками.
Поддержка браузерами
CSS синтаксис:
line-height: "normal | number | length | initial | inherit";
JavaScript синтаксис:
object.style.lineHeight = "90%"
Значения свойства
| Значение | Описание |
|---|---|
| normal | Нормальная высота строки (как правило, во всех современных браузерах высота строки по умолчанию составляет 120 %). Это значение по умолчанию. |
| number | Число, которое будет умножаться с текущим размером шрифта, чтобы задать высоту строки. |
| length | Фиксированная высота строки, которая задаётся с помощью единиц измерения, используемых в CSS (px, pt, cm…). |
| % | Высота строки в процентах от текущего размера шрифта. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS 1Наследуется
Да.Анимируемое
Да.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства line-height</title>
<style>
.test {
line-height: 10px; /* задаём высоту строки в пикселях */
}
.test2 {
line-height: normal; /* задаём высоту строки (значение по умолчанию) */
}
.test3 {
line-height: 150%; /* задаём высоту строки в процентах от текущего размера шрифта */
}
.test4 {
line-height: 2; /* задаём высоту строки числом, которое будет умножаться с текущим размером шрифта */
}
</style>
</head>
<body>
<p class = "test">Параграф в котором line-height: 10px<br>Параграф в котором line-height: 10px</p>
<p class = "test2">Параграф в котором line-height: normal<br>Параграф в котором line-height: normal</p>
<p class = "test3">Параграф в котором line-height: 150%<br>Параграф в котором line-height: 150%</p>
<p class = "test4">Параграф в котором line-height: 2<br>Параграф в котором line-height: 2</p>
</body>
</html>
В этом примере мы с помощью свойства line-height установили различные значения междустрочного интервала для абзацей (элемент <p>). Результат нашего примера:
Пример установки междустрочного интервала.CSS свойстваразмеры элемента — учебник CSS
Для того чтобы объекту можно было задать определенную ширину и высоту, в CSS существуют два свойства — width и height (соответственно). С их помощью вы можете устанавливать фиксированные размеры элементов, будь-то сайдбар, изображение, таблица или любой блок.
Особенности вычисления ширины и высоты
Для определения ширины либо высоты объекта можно использовать любые единицы измерения длины в CSS. Наиболее просты в понимании пикселы. Если вы используете процентную запись, имейте в виду, что в этом случае ширина объекта будет зависеть от ширины его родителя. Если такового нет, то ширина элемента вычисляется, исходя из ширины окна браузера (при изменении пользователем ширины окна значение
В качестве значения ширины можно использовать и единицу em, которая является примерно тем же, чем и размер шрифта текста, но только в условных единицах. К примеру, вы установили размер для шрифта 24px. Тогда 1em для этого элемента будет равен 24 пикселам, а если вы зададите width: 2em, то ширина составит 2×24px = 48 пикселов. Если размер шрифта не задан, он будет унаследован.
Высота height, заданная в процентах, вычисляется аналогичным образом, что и ширина, но расчет основывается уже на высоте родительского элемента, а не на его ширине. Если родитель отсутствует, высота будет зависеть от высоты окна браузера.
Процентная ширина и высота дочернего элемента вычисляются на основании размеров родителяЧто входит в ширину и высоту
Сразу стоит запомнить, что у свойств width и height есть особенность — они не включают в себя значения margin, padding и border. Значение, которое вы установите для width/height, будет означать лишь ширину/высоту области содержимого элемента.
Таким образом, для того чтобы вычислить, например, фактическую ширину элемента (место, которое он в действительности займет на экране), понадобится немного арифметики. Фактическая ширина — это сумма значений, таких как width, padding, border и margin. Напомним, что ранее мы рассматривали, как выглядит блочная модель CSS.
Для закрепления знаний покажем пример. Допустим, у вас есть элемент с таким стилем:
width: 200px; margin-left: 15px; margin-right: 15px; padding-left: 10px; border-left: 3px solid #333;
Для подсчета фактической ширины элемента выполним сложение:
width + margin-left + margin-right + padding-left + border-left = 200px + 15px + 15px + 10px + 3px = 243px (фактическая ширина)
Рекомендации по высоте
Свойство height может быть удобным, если надо точно контролировать, например, высоту изображения. Однако, если в контейнере будет содержаться текст или любой другой контент, у которого может варьироваться высота, крайне не рекомендуется устанавливать фиксированную высоту для контейнера, так как подобная верстка может привести к неожиданному результату — контент будет отображаться поверх другого содержимого.
Вместо фиксированной высоты использовать height: auto — эта запись означает, что высота объекта будет рассчитываться автоматически, в зависимости от содержимого, которое он содержит.
Другой способ избежать развала верстки — использовать запись overflow: auto. В таком случае, если высота содержимого будет превышать значение height своего контейнера, браузер добавит к контейнеру полосу прокрутки.
В следующем уроке вы узнаете, как можно переопределять ширину элемента с помощью интересного и очень полезного свойства box-sizing.
Атрибут height | HTML | WebReference
Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится элемент <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Старайтесь задавать размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остаётся неизменным. При этом качество изображения может ухудшиться.
Синтаксис
<img>Значения
Любое целое положительное число в пикселях или процентах.
Значение по умолчанию
Исходная высота изображения.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IMG, атрибут width</title>
</head>
<body>
<p><img src="image/sample.gif"
alt=""></p>
</body>
</html>Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.01.2017
Редакторы: Влад Мержевич