Задание ширины и высоты

Если необходимо задать ширину позиционированного элемента, очевидно, надо использовать свойство width. Аналогично свойство height позволяет объявить высоту позиционированного элемента. Однако задавать ширину и высоту элемента при позиционировании элементов не всегда необходимо. Так, если размещение четырех сторон элемента описывается свойствами top, right, bottom и left, то высота и ширина элемента неявно определяются смещениями. Предположим, абсолютно позиционированный элемент должен заполнить левую половину своего блока-контейнера сверху донизу. Ниже прив дятся возможные значения:

top: 0; bottom: 0; left: 0; right: 50%;

По умолчанию для свойств width и height устанавливается значение auto, поэтому результат будет точно таким же, как и при задании следующих значений:

top: 0; bottom: 0; left: 0; right: 50%; width: 50%; height: 100%;

Присутствие width и height в этом примере ничего не добавляет к компоновке этого Конечно, если добавить в элемент отступы, рамку или поля, то прямое задание height и width имело бы смысл:

top: 0; bottom: 0; left: 0; right: 50%; width: 50%; height: 100%; padding: 2em;

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Запрет на обтекание
Запрет перемещения