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

При помощи возможностей CSS , нам удастся самостоятельно выбрать ширину и высоту. Давайте попробуем теперь.

HEIGHT – свойство устанавливающее высоту блока;

WIDTH - свойство устанавливающее ширину блока;

Зачастую в качестве блоков элементов CSS используют элемент DIV. Но все свойства ширины и высоты можно применить и к параграфам, спискам и др.

Давайте перейдем сразу же к практике. Я создал 4 класса, и поочередно присвоил их одному и тому же боксу (в данном случае DIV) с текстом. Вот что вышло.

.box1 {
width: 200px;
border: 2px solid black;
background: #FFFFFF;
}

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

.box2 {
height: 200px;
border: 2px solid black;
background: # FFFFFF;
}

Теперь, фиксированная высота, а ширина растягивается по содержимому.

.box3 {
width: 200px;
height: 400px;
border: 2px solid black;
background: # FFFFFF;
}

Теперь фиксируется как высота, так и ширина.

.box4 {
width: 400px;
height: 400px;
border: 2px solid black;
background: # FFFFFF;
}

А вот так будет выглядеть бокс с фиксированной шириной и высотой, если содержимое не влазит туда. Текст просто выйдет за рамки блока.

С шириной и высотой, думаю все ясно. Давайте перейдем к следующему занятию.