/* Single value: all sides */
.element {
  padding: 20px;
}

/* Two values: vertical, horizontal */
.element {
  padding: 15px 25px;
  /* top/bottom: 15px, left/right: 25px */
}

/* Three values: top, horizontal, bottom */
.element {
  padding: 10px 20px 15px;
}

/* Four values: top, right, bottom, left (clockwise) */
.element {
  padding: 10px 20px 15px 5px;
}

/* Individual sides */
.element {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5px;
}

/* Card design with padding */
.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  /* Creates comfortable internal spacing */
}

/* Button padding for click targets */
button {
  padding: 12px 24px;
  /* Minimum 44px touch target (12*2 + text height) */
  font-size: 16px;
}

/* Input field padding */
input {
  padding: 10px 12px;
  border: 1px solid #ccc;
  font-size: 16px;
}

/* Section with generous padding */
section {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Asymmetric padding */
.element {
  padding: 20px 40px;
  /* More horizontal padding for wider layout */
}

/* Padding example */
.box-with-padding {
  background: lightblue;
  padding: 20px;
  border: 2px solid blue;
}

/* The padding area has the lightblue background */

/* Margin example */
.box-with-margin {
  background: lightblue;
  margin: 20px;
  border: 2px solid blue;
}

/* The margin area is transparent (shows parent background) */

/* When to use padding vs margin */

/* Use padding when: */
/* - You want spacing to be part of the element */
/* - Background color should extend to the spacing */
/* - Creating buttons, cards, sections */

/* Use margin when: */
/* - You want space between elements */
/* - Elements should not overlap visually */
/* - Creating rhythm between sections */