Padding, Border, Margin in JavaScript

Every element is a box in layers. In the middle is the content, such as the text. Around it is the padding, space inside the box. Then the border, the line around the box. Outside the border is the margin, the space between this box and the next.

A shorthand sets several sides at once. With one value, all four sides get it. With two values, the first is for the top and bottom, the second for the right and left:

button {
  padding: 4px 10px;
}

The button gets padding-top and padding-bottom of 4px, and padding-right and padding-left of 10px. border is a shorthand too: a width, a style and a color, as in 2px dashed #999.

By default, a width you set is the width of the content only, so padding and border make the box wider. box-sizing: border-box makes the width include them. The * selector matches every element, so a * rule is the usual place for it. The check can't measure sizes: it prints each declared value and the rule it comes from. For the first card, the Mug, it must print:

li#mug.card "Mug $12 Buy"
  padding-top: 8px   <- .card
  padding-right: 16px   <- .card
  padding-bottom: 8px   <- .card
  padding-left: 16px   <- .card
  border: 1px solid #ddd   <- .card
  margin-bottom: 16px   <- .card
  box-sizing: border-box   <- *

Your task: in the second .card rule, add padding: 8px 16px, border: 1px solid #ddd and margin-bottom: 16px. Then, at the top of the file, add a * rule with box-sizing: border-box.

Assignment
Follow the Coding Tutorial to give the product cards padding, a border and a bottom margin, and every element box-sizing: border-box, in styles.css.

Hint
The check splits your padding shorthand into its four sides. If padding-left prints 8px, you swapped the two values: the first one is for the top and bottom.