Особливості блокових елементів у 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;
}