Selectors and the box model

CSS answers one question: which elements, and what about them? The 'which' is the selector, the 'what' is the declarations.

p {
  color: #333;
  font-size: 16px;
}

.card {
  background: white;
  padding: 16px;      /* space INSIDE the box */
  margin: 24px 0;     /* space OUTSIDE the box */
  border: 1px solid #ddd;
  border-radius: 10px;
}

Every element is a box

• content — the text or image itself.
• padding — breathing room inside the border.
• border — the edge line.
• margin — pushing other boxes away.

Eighty percent of 'why is there a weird gap?' is padding and margin being confused. Padding is inside the box; margin is outside it.