Margin

Inside the card, the name, the age, the description and the button are squeezed together, with no space between them. The space between elements is margin, the space outside the border. Its classes work just like those for padding, only with m instead of p:

A habit that keeps things simple: between elements below each other, make the space from one side only, for example always with a top margin (mt-*). Then you never have to think about what happens when two margins meet. (As you saw in the CSS course, the vertical margins of neighboring elements collapse, and the gap is only as big as the larger of them.)

In the card, the name and the age belong together, so they stay close. The description gets more space, and the button the most, so that it stands apart from the text.

Preflight also removed the 8-pixel margin of body, which is why the card touches the edges of the preview. We'll give the page padding: space inside body, between the edge of the window and the content.

Tip: You can see the spaces with Inspect, as in the CSS course: right-click an element in the preview, choose Inspect and hover over the element in the developer tools. The browser shows its padding and margin in different colors.