Width и height: определяем размеры элемента. Параметры css width и height для задания размеров элементов html страницы Какой параметр задает высоту элемента

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

Между содержимым элемента и его рамкой находятся отступы 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% ширины блока-контейнера, в противном случае его ширина будет уменьшена.

Последнее обновление: 21.04.2016

Размеры элементов задаются с помощью свойств width (ширина) и height (высота).

Значение по умолчанию для этих свойств - auto , то есть браузер сам определяет ширину и высоту элемента. Можно также явно задать размеры с помощью единиц измерения (пикселей, em) или с помощью процентов:

Width: 150px; width: 75%; height: 15em;

Пиксели определяют точные ширину и высоту. Единица измерения em зависит от высоты шрифта в элементе. Если размер шрифта элемента, к примеру, равен 16 пикселей, то 1 em для этого элемента будет равен 16 пикселям. То есть если у элемента установить ширину в 15em, то фактически она составит 15 * 16 = 230 пикселей. Если же у элемента не определен размер шрифта, то он будет взят из унаследованных параметров или значений по умолчанию.

Процентные значения для свойства width вычисляются на основании ширины элемента-контейнера. Если, к примеру, ширина элемента body на веб-странице составляет 1000 пикселей, а вложенный в него элемент

имеет ширину 75%, то фактическая ширина этого блока

составляет 1000 * 0.75 = 750 пикселей. Если пользователь изменит размер окна браузера, то ширина элемента body и соответственно ширина вложенного в него блока div тоже изменится.

Процентные значения для свойства height работают аналогично свойству width, только теперь высота вычисляется по высоте элемента-контейнера.

Например:

Размеры в CSS3

В то же время фактические размеры элемента могут в итоге отличаться от тех, которые установлены в свойствах width и height . Например:

Размеры в CSS3

Как видно на скриншоте, в реальности значение свойства width - 200px - определяет только ширину внутреннего содержимого элемента, а под блок самого элемента будет выделяться пространство, ширина которого равна ширине внутреннего содержимого (свойство width) + внутренние отступы (свойство padding) + ширина границы (свойство border-width) + внешние отступы (свойство margin). То есть элемент будет иметь ширину в 230 пикселей, а ширина блока элемента с учетом внешних отступов составит 250 пикселей.

Подобные расчеты следует учитывать при определении размеров элементов.

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

min-width : минимальная ширина

max-width : максимальная ширина

min-height : минимальная высота

max-height : максимальная высота

min-width: 200px; width:50%; max-width: 300px;

В данном случае ширина элемента равна 50% ширины элемента-контейнера, однако при этом не может быть меньше 200 пикселей и больше 300 пикселей.

Переопределение ширины блока

Свойство box-sizing позволяет переопределить установленные размеры элементов. Оно может принимать одно из следующих значений:

content-box: значение свойства по умолчанию, при котором браузер для определения реальных ширины и высоты элементов добавляет к значениям свойств width и height ширину границы и внутренние отступы

padding-box: указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы как часть своего значения. Например, пусть у нас есть следующий стиль:

Width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: padding-box;

Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) - 10px (padding-left) - 10px (padding-right) = 180px.

Стоит отметить, что большинство современных браузеров не поддерживают данное свойство.

border-box: указывает веб-браузеру, что ширина и высота элемента должны включать внутренние отступы и границы как часть своего значения. Например, пусть у нас есть следующий стиль:

Width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: border-box;

Здесь реальная ширина внутреннего содержимого блока будет равна 200px (width) - 10px (padding-left) - 10px (padding-right) - 5px (border-left-width) - 5px (border-right-width) = 170px.

Например, определим два блока, которые отличаются только значением свойства box-sizing:

Размеры в CSS3

Определение фактического размера в CSS 3

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

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.

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

width и height — ширина и высота элементов в css

С помощью атрибутов стиля width и height можно задавать соответственно ширину и высоту блочных элементов:

width: auto|<ширина>|inherit
height: auto|<ширина>|inherit

В качестве значений можно использовать любые доступные в css единицы измерения - например, пикселы (px), дюймы (in), пункты (pt) и др.:

p {width:200px; height:150px}

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

div {width:40%;}

Значение auto отдает управление размерами элемента веб-браузеру и является значением по умолчанию. В этом случае размеры элемента будут такие, чтобы в нем полностью поместилось все его содержимое.

Рассмотрим несколько примеров.

width and height

Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.

Результат:

В этом примере мы создали блок div и вложили в него абзац p с текстом. Для div-а мы строго задали размеры 300 на 300 пикселей. У элемента p значения свойств width и height равны auto, поэтому как видно на скриншоте, его ширина установилась равной ширине родительского элемента, а высота стала такой, чтобы в нем поместился весь содержащийся в абзаце текст.

Теперь изменим css настройки для абзаца p и зададим фиксированные размеры:

Layer2 {
background: #eee;
width:250px;
}

Результат:

Как видим ширина абзаца стала уже и равна 250 пикселей, а его высота увеличилась так, чтобы уместился текст, так как параметр height остался равным auto.

Теперь давайте зададим высоту и ширину абзаца в процентах:

Layer2 {
background: #eee;
width:50%;
height:50%;
}

Результат:

Как видно на картинке, ширина элемента p стала равна половине ширины элемента div. А высота увеличилась и стала равна 75 процентам высоты div.

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

Определить минимальную ширину и высоту можно с помощью атрибутов min-width и min-heigh:

min-width: <ширина>
min-height: <высота>

Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальные размеры:

max-width: <ширина>
max-height: <высота>

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

Стоит уточнить, что задание параметров height и width имеет смысл только для блочных тегов , так как для строчных элементов эти параметры браузером не обрабатываются.

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

Например, уменьшим размеры абзаца p из выше рассмотренных примеров до 100 пикселей:

Layer2 {
background: #eee;
width:100px;
height:100px;
}

Результат:

Как видно, текст вышел за границы абзаца и выглядит это не очень красиво. Для избежания подобных ситуаций существует правило css — overflow.

Параметр переполнения overflow для скрытия (hidden, visible) или прокрутки (scroll, auto) контента

Переполнение контента может возникнуть, когда ограничивают и ширину и высоту элемента. Рассмотрим два абзаца:

Текст первого абзаца

Текст второго абзаца

Результат:

Так как ни ширина ни высота для абзацев не заданы, то браузер самостоятельно рассчитывает их исходя из своего собственного понимания значения auto. В результате абзацы по ширине заняли все доступное пространство, а по высоте в соответствии с содержащимся в них контентом.

Теперь у первого абзаца ограничим ширину:

Текст первого абзаца

Текст второго абзаца

Результат:

Ширина абзаца ожидаемо уменьшилась, а высота установилась такой, чтобы вместить в себя весь текст.

Ну а теперь ограничим у первого абзаца и высоту:

Текст первого абзаца

Текст второго абзаца

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

overflow: visible|hidden|scroll|auto|inherit

По умолчанию overflow принимает значение visible, которое сообщает браузеру, чтобы он отображал содержимое не уместившееся в контейнере. Результат можно увидеть на примере выше.

Правило скрывает все, что не помещается в контейнере:

Значение scroll отобразит в элементе по вертикали и горизонтали полосы прокрутки даже в том случае, если все содержимое умещается:

Текст первого абзаца

Текст второго абзаца

Наиболее популярным и логичным решением, если вам понадобится сделать полосы прокрутки для контейнера является значение auto . В этом случае браузер сам будет определять когда и по каким осям стоит отображать полосы прокрутки:

Текст первого абзаца

Текст второго абзаца

Результат:

Для настройки полос прокрутки можно также использовать атрибуты стиля overflow-x и overflow-y, которые позволяют настраивать отображение прокрутки по отдельным осям. Таким образом отвечает за горизонтальную ось , а за вертикальную ось .

Поэтому если вам, например, нужно чтобы в абзаце горизонтальная прокрутка не появлялась никогда, а вертикальная появлялась только по необходимости, то достаточно написать следующее правило css:

p{overflow-x:hidden;overflow-y:auto;}

И задача будет решена.

На этом все. До новых встреч. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей.

Тематические материалы: