Урок 12: height/высота и width/ширина

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

• width
• height

Установка ширины [width]

Свойством width вы можете определять ширину элемента.

В примере показан бокс для ввода текста:

div.box {
width: 200px;
border: 1px solid black;
background: orange;
}

• Показать пример

Установка высоты [height]

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

div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}

• Показать пример

Резюме

Уроки 9, 10, 11 и 12 дали введение в боксовую модель CSS. Как вы, вероятно, заметили, боксовая модель предоставляет много новых возможностей. Ранее вы уже могли использовать таблицы в HTML для дизайна страниц, но с помощью CSS и боксовой модели вы сможете создавать элегантный дизайн более точно и в соответствии с рекомендациями W3C.