Высота(height) и ширина(width) блоков.



Высота и ширина определяются автоматически по умолчанию. Чем больше текста, тем шире и выше блок. С помощью CSS можно задавать свои параметры высоты и ширины блока.

  • HEIGHT - устанавливает высоту блока;
  • WIDTH - устанавливает ширину блока;

Под блоком обычно понимается DIV. Свойство ширины и высоты применимо к параграфам, спискам и т.д.

Зададим фиксированную ширину блока. Высота по умолчанию устанавливается от содержимого блока.

.bord { width: 250px; border: 1px solid red; background: #D0FF00; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Зададим фиксированную высоту блока. Ширина по умолчанию устанавливается от содержимого блока.

.bord { height: 350px; border: 1px solid red; background: #D0FF00; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Фиксируем высоту и ширину блока и посмотрим результат.


.bord { height: 800px; width: 450px; border: 1px solid red; background: #D0FF00; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Следующий пример:

.bord { height: 250px; width: 350px; border: 1px solid red; background: #D0FF00; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Как видите наш текст вышел за рамки блока.

Примечание! Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Указывая ширину блока, вы задаете ширину для содержимого.

Далее рассмотрим: Позиционирование блоков