Інтерактивний урок: margin, padding, border

Цей урок зосереджений на практиці.

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

Що ти потренуєш

• margin створює простір зовні елемента.
• padding створює простір усередині елемента.
• border малює лінію навколо padding і content.
• border-radius заокруглює кути коробки.
• border-style змінює тип лінії.

Спробуй інтерактивний тренажер

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

Дивись на блок попереднього перегляду та CSS-код під ним. Кожен елемент керування змінює одну CSS-декларацію.

.preview-box {
  margin: 24px;
  padding: 24px;
  border: 4px solid #2563eb;
  border-radius: 12px;
}