CSS: Margins

Internal indents allowed you to add padding to the block and space between the border of the block and its content. But how do you keep two adjacent blocks from pressing against each other?

A card with white text on a purple background

To separate the two cards from the example above, you use outer indents. Their principle is the same as the margins, only the direction is different. In terms of properties and their values, it's the same. There are 4 rules and one general one:

margin-top
margin-right
margin-bottom
margin-left

To combine values, use the margin property, which preserves the order in which it's specified:

top
right
bottom
left

Also, as with margins, there are shorthand versions of these rules for convenience:

If you specify only one value, it will be used simultaneously for all sides
If you specify two values, the first will be used for vertical (top and bottom) margin and the second for horizontal (right and left) margin
If you specify three values, they will be used for top, horizontal and bottom margin

<div class="card">A card with white text on a purple background</div>
<div class="card">A card with white text on a purple background</div>

.card {
  margin: 10px 0;

  color: #ffffff;
  background-color: #673ab7;
}

A card with white text on a purple background

Instructions

Add <div> to the editor with the class set to margin and set the margins to 20 pixels on all sides. Write the styles in the <style> tag. Use shorthand notation