Margins & Padding

Margins and Padding

Both use the same shorthand syntax:

/* All four sides */
margin: 16px;

/* Top/bottom, Left/right */
margin: 16px 24px;

/* Top, Right, Bottom, Left (clockwise) */
margin: 8px 16px 24px 32px;

/* Individual sides */
margin-top: 8px;
margin-right: 16px;
margin-bottom: 8px;
margin-left: 16px;

Center horizontally with auto:

.container {
  width: 600px;
  margin: 0 auto;  /* top/bottom: 0, left/right: auto */
}

Negative margins pull elements closer:

.overlap { margin-top: -20px; }

Padding uses the same syntax but adds space inside the border.

Your Task

Create a card with margin (including auto for centering) and padding.