Опорная идея
Каждый элемент на странице — это прямоугольная «коробка». У неё четыре слоя, изнутри наружу: • content — само содержимое (текст, картинка); • padding — внутренние отступы между содержимым и рамкой; • border — рамка; • margin — внешние отступы между этой коробкой и соседями.
Пример: .card { padding: 16px; margin: 12px; border: 1px solid #e2e8f0; border-radius: 12px; }
Важный приём, который облегчает жизнь новичку: * { box-sizing: border-box; } С ним заданная ширina включает padding и border, и элементы не «разъезжаются» от добавления отступов. Понимание блочной модели — ключ к предсказуемой вёрстке.