CSS: Appearance
Spacing and cards
Your goal: Create a readable content card.
Learn
Padding adds space inside a border. Margin adds space outside it. A border outlines the element. box-sizing: border-box includes padding and borders in a specified width.
View starter code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My hobby page</title>
<style>
* {
box-sizing: border-box;
}
.card {
background: #eff6ff;
}
</style>
</head>
<body>
<article class="card">
<h1>My hobby</h1>
<p>A short introduction.</p>
</article>
</body>
</html>Your challenge
Add padding, a border and a margin to the card. Compare the spaces inside and outside.
Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.
Practise in the sandboxShow a hint
Try padding: 24px; margin: 20px; border: 1px solid #94a3b8;.
Show a sample answer
Try the challenge first. This is one possible answer or a snippet to adapt.
.card {
padding: 24px;
margin: 20px;
border: 1px solid #94a3b8;
border-radius: 8px;
}Check your work
Text does not touch the border and the card has space around it.
Completion is your own check, not an automatic grade.