margin

/* Однакові відступи по 20px з усіх боків */

margin: 20px;

/* Відступ зверху та знизу по 10px, зліва та праворуч по 20px */

margin: 10px 20px;

/* Відступ зверху 10px, ліворуч і праворуч по 20px, знизу 5px */

margin: 10px 20px 5px;

/* Відступ зверху 10px, праворуч 15px, знизу 20px, зліва 25px */

margin: 10px 15px 20px 25px;

margin-top: 20px;

margin-right: 10px;

margin-bottom: 15px;

margin-left: 30px;

центрування блокових елементів

Блоковий елемент можна горизонтально відцентрувати всередині батьківського елемента, якщо його ширина більша за ширину цього елемента. Тобто, блоковому елементу задано фіксовану ширину. Для цього використовується особливість автоматичних горизонтальних маржинів. Якщо задати auto лівий і правий маржини, вільний простір розподіляється між ними, і блочний елемент центрується. Аби скоротити запис, можна скористатися складаною властивістю margin, задати нульові вертикальні значення й автоматичні горизонтальні.

.box {
width: 300px;
background-color: tomato;
margin: 0 auto;
}