Особенности блочных элементов в 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;
}