The box model

Every element is a box: the content, then padding (space inside the border), then border, then margin (space outside, between boxes). padding: 16px sets all four sides; padding: 8px 16px sets top/bottom then left/right; margin: 24px 0 is the same idea. border: 2px solid rgb(220, 223, 228) is width, style, color in one declaration.

By default width means the content only, so padding and borders make the box wider than you asked. box-sizing: border-box makes width include them, and most stylesheets set it on everything: * { box-sizing: border-box; }.

.card {
  padding: 16px;
  border: 2px solid rgb(220, 223, 228);
  margin: 24px 0;
}

Your task

Style .card with 16px of padding on every side, a 2px solid border in the color rgb(220, 223, 228), and 24px of margin above and below (none on the sides).

<!doctype html>
<html>
<head>
<style>
.card {
  padding: 16px;
  border: 2px solid rgb(220, 223, 228);
  margin: 24px 0;
}
</style>
</head>
<body>
<div class="card">
  <h2>A card</h2>
  <p>Padding inside, margin outside.</p>
</div>
</body>
</html>