Высота и ширина элемента

box-model

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

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

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

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

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

height
Значения:
auto Значение по умолчанию. Элемент будет отображаться в полную величину, независимо от высоты контейнера. Если сверху находится другой блок и для блока не задано обтекание с помощью свойства float, то произойдет наложение.
длина Высота элемента задается в величинах длины, например, px, cm и т.д.
% Вычисляется относительно высоты блока-контейнера.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

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

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

width
Значения:
auto Значение по умолчанию. Элемент занимает всю ширину блока-контейнера. Если для элемента задать поля, рамку или отступы, они будут вычитаться из ширины элемента. Если для элемента задать левое и правое поле, равное auto, то элемент расположится по середине блока-контейнера.
длина Ширина элемента задается в величинах длины, например, px, cm и т.д.
% Ширина вычисляется относительно родительского элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

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

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

height-width-auto

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

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

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

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

padding
Значения:
длина Отступы элемента задаются при помощи единиц длины, например, px, pt, cm.
% Вычисляются относительно ширины родительского элемента, могут меняться при изменении ширины элемента. Отступы сверху и снизу равны отступам слева и справа, т.е. верхние и нижние отступы тоже вычисляются относительно ширины элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

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

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

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

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

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

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

absolute-size

Рис. 3. margin: auto; для абсолютно позиционированного элемента
margin
Значения:
длина Размер отступа задается в единицах длины, например, px, in, em. Значение по умолчанию 0.
% Вычисляется относительно ширины блока контейнера. Изменяются, если изменяется ширина родительского элемента.
auto Значение по умолчанию, браузером вычисляется в ноль. Если для правого и левого отступов установить значение auto, то элемент будет центрирован внутри своего блока-контейнера.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

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

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

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

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

min-height / min-width / max-height / max-width
Значения:
длина Размеры элемента задаются в единицах длины. Значения не могут быть отрицательными.
% Вычисляется относительно ширины/высоты блока контейнера. Изменяются, если изменяется ширина родительского элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

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

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