Розділ 2 · Завдання 6
Padding і margin
Дві властивості, які легко переплутати: відступ всередині й зовні.
Уяви рамку як коробку
padding — відстань всередині коробки, між рамкою і текстом.
margin — відстань зовні коробки, між нею і сусідніми елементами.
Завдання
Додайте в style.css:
.box {
border: 2px solid #0066cc;
border-radius: 12px;
padding: 20px;
margin: 30px;
}
Щоб побачити різницю наочніше
Додайте звичайний абзац одразу під .box:
<p class="box">Цей текст обведений рамкою</p>
<p>А це звичайний текст одразу під рамкою</p>
Порада: окремо для кожного боку
padding-top, padding-right, padding-bottom, padding-left — так само для margin. Якщо відступ однаковий з усіх боків, простіше писати одним рядком.
Як запам'ятати
padding — «подушка» всередині коробки. margin — поле зовні, як поля в зошиті.
Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща