Turn a plain block into a neat card.
What to build
One rule for .card.
Requirements
- Padding of
16pxon all sides. - A border of
2px solid teal. - A top and bottom margin of
24px, with side margins of0.
Constraints
Use the border shorthand.
Example
margin: 10px 0; gives top and bottom margins only.
Why it works
Padding creates room inside the border, and margin keeps other boxes away.
Hints
Hint 1
The shorthand border takes a width, a style and a colour.
Hint 2
Two values for margin mean top and bottom, then left and right.
Solution
Show one correct solution (try it yourself first)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Card</title>
<style>
.card {
padding: 16px;
border: 2px solid teal;
margin: 24px 0;
}
</style>
</head>
<body>
<div class="card">A plain block</div>
</body>
</html>