Внешний отступ

Внутри карточки имя, возраст, описание и кнопка сжаты вместе, между ними нет места. Пространство между элементами — это внешний отступ (margin), пространство за пределами рамки. Его классы работают так же, как для внутреннего отступа, только с m вместо p:

Привычка, которая всё упрощает: между элементами, идущими друг под другом, делайте отступ только с одной стороны, например всегда верхний (mt-*). Тогда вам никогда не придётся думать, что происходит, когда два внешних отступа встречаются. (Как вы видели в курсе CSS, вертикальные внешние отступы соседних элементов схлопываются, и промежуток равен большему из них.)

В карточке имя и возраст относятся друг к другу, поэтому они стоят близко. Описанию мы дадим больше места, а кнопке — больше всего, чтобы она отделялась от текста.

Preflight убрал и 8-пиксельный внешний отступ у body, поэтому карточка прилегает к краям окна просмотра. Мы дадим странице внутренний отступ: пространство внутри body, между краем окна и содержимым.

Совет: увидеть отступы можно с помощью инспектора, как в курсе CSS: щёлкните элемент в окне просмотра правой кнопкой мыши, выберите Просмотреть код и наведите курсор на элемент в инструментах разработчика. Браузер покажет его внутренний и внешний отступы разными цветами.