Коробка CSS: margin, padding и border
Внешний зазор — margin, внутренний — padding, линия — border.
Все уроки · Уроки CSS: цвет, коробка и hover
Три зазора
Каждый элемент — коробка. border — линия. padding — зазор внутри линии. margin — зазор снаружи коробки.
.card {
margin: 16px;
padding: 12px;
border: 1px solid #2f6bff;
background: #101826;
color: white;
}Какой когда
Если текст прилип к краю, увеличьте padding. Если две коробки касаются, поставьте между ними margin. Если линии нет, напишите border.
Вопросы
margin и padding одно и то же? Нет. margin снаружи, padding внутри.
Что такое 16px? 16 пикселей. Небольшой зазор на экране.
Что если нет border? Коробка остаётся, линии не видно.
Куда идёт цвет? background красит внутренность коробки, color красит текст.