# Особенности блочных элементов в CSS

В данном уроке мы с вами рассмотрим теги, которые при отображении на экране являются блочными. К таким тегам относятся, к примеру, теги `div`. На примере этого тега давайте посмотрим на особенности блочных элементов.

## Ширина и высота блочного элемента

Блочному элементу можно задать ширину и высоту:

`<div>text</div>` `div { width: 100px; height: 100px; border: 1px solid red; }`

:

## Ширина блочного элемента

Если у блочного элемента не задана ширина, то он автоматически займет по ширине все доступное пространство:

`<div>text</div>` `div { height: 100px; border: 1px solid red; }`

:

## Высота блочного элемента

Если у блочного элемента не задана высота, то его высота сформируется содержимым:

`<div>text</div>` `div { width: 100px; border: 1px solid red; }`

:

## Высота без содержимого

Если содержимого нет, то мы увидим слипшуюся границу:

`<div></div>` `div { width: 100px; border: 1px solid red; }`

:

## Несколько блочных элементов рядом

Если расположить несколько блочных элементов рядом, то каждый из них будет начинаться с новой строки:

`<div>text</div> <div>text</div> <div>text</div>` `div { width: 100px; height: 100px; margin-bottom: 20px; border: 1px solid red; }`

:

←→
↑