Декілька значень у властивості margin

Подібно до інших властивостей CSS, властивість margin може приймати не тільки одне значення, але й два, три чи чотири. В цьому випадку різні значення задають відступи для різних сторін.

Чотири значення

Перше значення задає відступ зверху, друге - праворуч, третє - знизу, а четверте - зліва. Тобто ми починаємо зверху і йдемо по годинній стрілці: верх-право-низ-ліво. Дивіться приклад:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 300px;
	border: 1px solid red;
}
#child {
	height: 100px;
	border: 1px solid green;
	margin: 10px 20px 30px 40px;
}

Повторіть сторінку за цим зразком:

Два значення

Якщо передати властивості margin два значення, то перше задаватиме відступ одночасно зверху та знизу, а друге – одночасно і праворуч, і ліворуч.

Давайте подивимося приклад:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 300px;
	border: 1px solid red;
}

#child {
	height: 100px;
	border: 1px solid green;
	margin: 40px 20px;
}

Повторіть сторінку за цим зразком:

Три значення

Ну, і нарешті, якщо передати властивості margin три значення, то перше задаватиме відступ зверху, третє - відступ знизу, а друге - одночасно відступ ліворуч і праворуч.

Давайте подивимося приклад:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 300px;
	border: 1px solid red;
}

#child {
	height: 100px;
	border: 1px solid green;
	margin: 10px 20px 30px;
}

Повторіть сторінку за цим зразком: