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

Между содержимым элемента и его рамкой находятся отступы padding , за рамкой элемента — поля margin . Область содержимого существует у каждого элемента, остальные области являются необязательными.

Рис. 1. Блочная модель элемента

1. Высота элемента

Свойство height задает высоту контента блочного элемента и не оказывает никакого влияния на строчные элементы display: inline; . Высота строчных элементов равна высоте их содержимого. Отрицательные значения не допускаются. Свойство не наследуется.

Синтаксис

P {height: 100px;}

2. Ширина элемента

Свойство width задает ширину контента блочного элемента и не оказывает никакого влияния на строчные элементы display: inline; . Ширина строчных элементов равна ширине их содержимого. Отрицательные значения не допускаются. Свойство не наследуется.

Синтаксис

P {width: 100px;}

3. Высота и ширина абсолютно позиционированного элемента

Задавать ширину и высоту абсолютно позиционированного элемента position: absolute; не всегда необходимо, так как в данном случае высота и ширина неявно определяются смещением элемента. Если для элемента заданы границы border и поля margin , они уменьшают размеры области содержимого на соответствующие значения.

Div { background: #6A7690; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; } /*в данном случае высота элемента 100%, ширина 50% от родительского блока*/
Рис. 2. Высота и ширина абсолютно позиционированного элемента

4. Отступы элемента

С помощью свойства padding можно установить отступы одновременно для нескольких сторон элемента в следующем порядке: . Если элемент имеет фон, он будет распространяться на отступы в том числе. Отрицательные значения не допускаются. Свойство не наследуется.

Если заданы три значения, например, div {padding: 10px 20px 30px;} , то они распределятся в следующем порядке: первое значение — верхний отступ, второе — правый и левый отступ, третье — нижний отступ.
Если заданы два значения, например, div {padding: 10px 20px;} , то первое задаст верхний и нижний отступ, второе — правый и левый.
Одно значение, например, div {padding: 10px;} , установит одинаковый отступ для всех сторон элемента.

Синтаксис

P {padding: 5px 10px 15px 10px;}

4.1. Отступы с одной стороны элемента

Чтобы задать отступ только с одной стороны элемента, нужно воспользоваться одним из свойств padding-top , padding-right , padding-bottom , padding-left , например:

P {padding-left: 10px;}

5. Поля элемента

Большинство элементов отделены друг от друга полями. Свойство margin — это краткая форма записи полей элемента в следующем порядке: верхнее, правое, нижнее, левое . Используется в случае, когда нужно задать поля с нескольких сторон, но не обязательно с четырех. Смежные по вертикали поля блочных элементов схлопываются, а верхние и нижние поля не оказывают никакого эффекта на строчные элементы. Отрицательные значения допускаются. Свойство не наследуется.

Если заданы три значения, например, div {margin: 10px 20px 30px;} , то они распределятся в следующем порядке: первое значение — верхнее поле, второе — правое и левое поле, третье — нижнее поле.
Если заданы два значения, например, div {margin: 10px 20px;} , то первое задаст верхнее и нижнее поле, второе — правое и левое.
Одно значение, например, div {margin: 10px;} , установит одинаковые поля для всех сторон элемента.

{margin: 0 auto;} сработает только в том случае, если ширина элемента задана явно.

Рис. 3. margin: auto; для абсолютно позиционированного элемента

Синтаксис

Div {margin: 5px 10px 2px 5px;}

5.1. Поля с одной стороны элемента

Свойства margin-top , margin-right , margin-bottom , margin-left управляют соответствующими полями с каждой стороны элемента, например:

P {margin-left: 10px;}

6. Ограничение ширины и высоты

CSS также поддерживает еще несколько свойств, связанных с установкой высоты и ширины элементов вeб-стpaниц: min-height , min-width , max-height и max-width . Эти свойства позволяют устанавливать минимальное и максимальное значения ширины или высоты элемента, давая элементу возможность заполнить доступное пространство. Свойства часто используются для адаптивного дизайна веб-страниц. Применяется для всех элементов, кроме строчных и элементов таблиц. Всегда идут после основного правила, т.е. после задания элементу height или width . Не наследуется.

Можно задавать обычные размеры при помощи одних единиц измерения, а ограничения размеров при помощи других единиц, например:

Div { width: 400px; max-width: 50%; }

Элемент будет иметь ширину 400px , только если это значение не будет превышать 50% ширины блока-контейнера, в противном случае его ширина будет уменьшена.

В этой статье разберём, как в CSS можно установить блоку высоту в процентном отношении от его ширины. Применение этой технологии рассмотрим на примере создания карусели (слайдера) Bootstrap из изображений, имеющих различные размеры.

Создание блока с высотой, которая имеет определённый процент от его ширины

1. Создать HTML структуру из 2 блоков:
   Первый блок имеет 2 класса. С помощью класса item-responsive установим блоку относительное позиционирование. Это необходимо выполнить для того, чтобы 2 блок (который будет иметь абсолютное позиционирование) располагался относительно него. Кроме этого данный класс также используется для того, чтобы перед содержимым соответствующих элементов (item-responsive) добавить псевдоэлемент:before . Этот элемент будет устанавливать необходимую высоту блока относительно его ширины с помощью CSS-свойства padding-top . Трюк данного метода заключается в том, что если свойству padding указывать значение не в пикселях, а в процентах, то оно будет рассчитываться браузером относительно его ширины . Таким образом, можно получить блок с необходимой высотой. Следующее действие - это указать 2 блоку абсолютное позиционирование и выровнять его по первому блоку.
2. Добавить на страницу следующий CSS код: .item-responsive { position: relative; /* относительное позиционирование */ } .item-responsive:before { display: block; /* отображать элемент как блок */ content: ""; /* содержимое псевдоэлемента */ width: 100%; /* ширина элемента */ } .item-16by9 { padding-top: 56,25%; /* (9:16)*100% */ } .item-responsive>.content { position: absolute; /* абсолютное положение элемент */ /* положение элемента */ top: 0; left: 0; right: 0; bottom: 0; } /* При необходимости (для блоков, имеющих данные классы) */ .item-4by3 { padding-top: 75%; /* (3:4)*100% */ } .item-2by1 { padding-top: 50%; /* (1:2)*100% */ } .item-1by1 { padding-top: 100%; /* (1:1)*100% */ }

Применение вышеприведённой технологии при создании карусели Bootstrap

Если вы не знакомы с Bootstrap и хотите узнать что это такое, то можете воспользоваться статьёй Введение в Bootstrap .

Рассмотрим пример, в котором вышеприведённую HTML структуру и CSS код будем использовать для отображения слайдов карусели Bootstrap .

В качестве изображений будем использовать следующие файлы:

• carousel_1.jpg (ширина = 736px, высота = 552px, соотношение сторон (высота к ширине) = 1,33);
• carousel_2.jpg (ширина = 1155px, высота = 1280px, соотношение сторон (высота к ширине) = 0,9);
• carousel_3.jpg (ширина = 1846px, высота = 1028px, соотношение сторон (высота к ширине) = 1,8);
• carousel_4.jpg (ширина = 1140px, высота = 550px, соотношение сторон (высота к ширине) = 2,07);
• carousel_5.jpg (ширина = 800px, высота = 600px, соотношение сторон (высота к ширине) = 1,33);

Изображения будем задавать как фон. Это позволит использовать в карусели Bootstrap 3 изображения с не одинаковыми соотношениями сторон.

HTML разметка карусели:

CSS код карусели:

Item-responsive { position: relative; /* относительное позиционирование */ } .item-responsive:before { display: block; /* отображать элемент как блок */ content: ""; /* содержимое псевдоэлемента */ width: 100%; /* ширина элемента */ } .item-16by9 { padding-top: 56.25%; /* (9:16)*100% */ } .item-responsive>.content { position: absolute; /* абсолютное положение элемент */ /* положение элемента */ top: 0; left: 0; right: 0; bottom: 0; background-size: cover !important; }

По умолчанию для блочных элементов используется автоширина. Это означает, что элемент будет растянут по горизонтали ровно на столько, сколько есть свободного места. Высота блочных элементов по умолчанию устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы отобразилось все содержимое. Чтобы установить собственные размеры для области содержимого элемента, вы можете использовать свойства width и height .

CSS свойство width позволяет задать ширину области содержимого элемента, а свойство height высоту области содержимого:

Обратите внимание, что свойства width и height определяют размер только области содержимого, чтобы вычислить общую ширину блочного элемента, нужно сложить ширину области содержимого, левого и правого внутренних отступов и ширину левой и правой рамки. То же самое касается и общей высоты элемента, только все значения вычисляются по вертикали:

Для данного абзаца зададим только ширину и высоту.

Этот абзац содержит, кроме ширины и высоты, внутренний отступ, рамку и внешний отступ.

Попробовать »

В примере хорошо видно, что второй элемент занимает больше пространства, чем первый. Если посчитать по нашей формуле, то размеры первого абзаца - 150x100 пикселей, а размеры второго абзаца:

Общая высота:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	верхняя рамка		верхний отступ		высота		нижний отступ		нижняя рамка

то есть 180x130 пикселей.

Переполнение элементов

После того как вы определили для элемента ширину и высоту, стоит обратить внимание на один немаловажный момент - содержимое, расположенное внутри элемента, может превысить указанный размер блока. В этом случае часть содержимого будет выходить за границы элемента, чтобы избежать этого неприятного момента, можно воспользоваться CSS свойством overflow . Свойство overflow сообщает браузеру, как нужно поступить в том случае, если содержимое блока превышает его размер. Это свойство может принимать одно из четырех значений:

• visible - значение, используемое браузером по умолчанию. Указание этого значения будет иметь тот же эффект, что и отсутствие установки свойства overflow.
• scroll - добавляет к элементу полосы прокрутки по вертикали и горизонтали.
• auto - добавляет полосы прокрутки при необходимости.
• hidden - скрывает часть содержимого, которое выходит за границы блочного элемента.

Описание

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег ). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow : auto к стилю элемента.

Синтаксис

height: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства height

Объектная модель

document.getElementById("elementID ").style.height

Браузеры

Браузер Internet Explorer 6 некорректно определяет height как min-height .

В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

The height CSS property specifies the height of an element. By default, the property defines the height of the content area . If box-sizing is set to border-box , however, it instead determines the height of the border area .

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The min-height and max-height properties override height .

Syntax

/* Keyword value */ height: auto; /* values */ height: 120px; height: 10em; /* Value */ height: 75%; /* Global values */ height: inherit; height: initial; height: unset;

Values

CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> Defines the height as an absolute value. CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> Defines the height as a percentage of the containing block"s height. auto The browser will calculate and select a height for the specified element. max-content The intrinsic preferred height. min-content The intrinsic minimum height. fit-content( CSS data type represents a value that can be either a or a ."> ) Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content,)).

Formal syntax

CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> border-box content-box available min-content max-content fit-content auto

Example

HTML

I"m 50 pixels tall.

I"m 25 pixels tall.

I"m half the height of my parent.

CSS

div { width: 250px; margin-bottom: 5px; border: 2px solid blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height: 100px; } #child { height: 50%; width: 75%; }

Result

Accessibility concerns

Ensure that elements set with a height are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

Specifications

Specification	Status	Comment
CSS Intrinsic & Extrinsic Sizing Module Level 4	Editor"s Draft
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of "height" in that specification.	Working Draft	Added the max-content , min-content , fit-content keywords.
CSS Transitions The definition of "height" in that specification.	Working Draft	Lists height as animatable.
CSS Level 2 (Revision 1) The definition of "height" in that specification.	Recommendation	Adds support for the CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> values and precises on which element it applies to.
CSS Level 1 The definition of "height" in that specification.	Recommendation	Initial definition.

Initial value	auto
Applies to	all elements but non-replaced inline elements, table columns, and column groups
Inherited	no
Percentages	The percentage is calculated with respect to the height of the generated box"s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto . A percentage height on the root element is relative to the initial containing block.
Media	visual
Computed value	a percentage or auto or the absolute length
Animation type	a CSS data type are interpolated as real, floating-point numbers.">length , CSS data type are interpolated as real, floating-point numbers.">percentage or calc();
Canonical order	the unique non-ambiguous order defined by the formal grammar

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
height	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 7	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
fit-content	Chrome Full support 46	Edge No support No	Firefox No support No	IE No support No	Opera Full support 33	Safari Full support 11 Full support 11 Full support 9 Prefixed Prefixed				Opera Android ?	Safari iOS Full support 11 Full support 11 Full support 9 Prefixed Prefixed Implemented with the vendor prefix: -webkit-
max-content	Chrome Full support 46	Edge No support No	Prefixed Prefixed	IE No support No	Opera Full support 44	Safari Full support 11	WebView Android Full support 46	Chrome Android Full support 46	Prefixed Prefixed Implemented with the vendor prefix: -moz-			Samsung Internet Android Full support 5.0
min-content	Chrome Full support 46	Edge No support No	Firefox Full support 66 Full support 66 Full support 3 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE No support No	Opera Full support 44	Safari Full support 11	WebView Android Full support 46	Chrome Android Full support 46	Firefox Android Full support 66 Full support 66 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android Full support 43	Safari iOS Full support 11	Samsung Internet Android Full support 5.0
stretch	Chrome Full support 28 Webkit-fill-available">Alternate Name Full support 28 Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name	Edge No support No	Firefox No support No	IE No support No	Opera Full support 15 Webkit-fill-available">Alternate Name Full support 15 Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available	Safari Full support 9 Webkit-fill-available">Alternate Name Full support 9 Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available	WebView Android Full support 4.4 Webkit-fill-available">Alternate Name Full support 4.4 Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available	Chrome Android Full support 28 Webkit-fill-available">Alternate Name Full support 28 Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available	Firefox Android No support No	Opera Android ?	Safari iOS Full support 9 Webkit-fill-available">Alternate Name Full support 9 Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available	Samsung Internet Android Full support 5.0 Webkit-fill-available">Alternate Name Full support 5.0 Webkit-fill-available">Alternate Name Webkit-fill-available">Alternate Name Uses the non-standard name: -webkit-fill-available

Legend

Full support Full support No support No support Compatibility unknown Compatibility unknown Uses a non-standard name. Uses a non-standard name. Requires a vendor prefix or different name for use. Requires a vendor prefix or different name for use.