Просте Пояснення Margin і Padding

Ви вже знаєте, що кожен елемент має вміст, внутрішній відступ (padding), рамку (border) та зовнішній відступ (margin). Розглянемо, як керувати відступами за допомогою цих властивостей.

Внутрішній відступ (Padding)

Внутрішній відступ створює простір всередині елемента, між вмістом і рамкою.

.box {
  padding: 20px;
}

Це додає 20px внутрішнього відступу з усіх чотирьох сторін.

Скорочений запис для padding

Внутрішній відступ можна задавати скороченим синтаксисом.

Порядок значень завжди: верх → праворуч → низ → ліворуч

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Окремі властивості відступів (padding)

Можна також керувати кожною стороною окремо:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;

Відступ (Margin)

Відступ створює простір зовні елемента, між ним та іншими елементами.

.box {
  margin: 20px;
}

Скорочений запис для відступів (margin)

Відступ використовує ті ж правила скороченого запису, що й padding:

margin: 20px; /* all sides */
margin: 10px 20px; /* top/bottom | left/right */
margin: 10px 20px 5px; /* top | left/right | bottom */
margin: 10px 15px 20px 25px; /* top | right | bottom | left */

Окремі властивості відступу

Можуть також задаватися окремо:

margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;

Межа

Межа розташована між внутрішнім відступом (padding) і зовнішнім відступом (margin).

Базовий скорочений запис:

border: 4px solid brown;

Це визначає: товщину, стиль, колір.

Поширені стилі рамок включають solid, dotted, dashed та double.

За потреби можна також керувати окремими сторонами:

border-top: 2px solid black;

Розгляньмо наступний приклад і визначимо можливі стилі рамок:

Вивід