/* Complete box model example */
.box {
  /* Content area width and height */
  width: 200px;
  height: 100px;

  /* Padding: space inside the border */
  padding: 20px;

  /* Border: visible line */
  border: 2px solid #333;

  /* Margin: space outside the border */
  margin: 30px;
}

/* Visual structure (outside to inside):
   [Margin: 30px]
   [Border: 2px]
   [Padding: 20px]
   [Content: 200px x 100px]
*/

/* Content: the actual size of the element */
.element {
  width: 300px;
  height: 150px;
  background: lightblue;
}

/* Padding: space inside, between content and border */
.element {
  padding: 20px;
  /* Adds 20px on all sides inside the element */
}

/* Padding shorthand: top right bottom left */
.element {
  padding: 10px 20px 15px 5px;
}

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

/* Border: the outline of the box */
.element {
  border: 2px solid #333;
  /* width style color */
}

/* Border individual sides */
.element {
  border-top: 2px solid red;
  border-right: 3px dashed blue;
  border-bottom: 2px solid green;
  border-left: 2px dotted orange;
}

/* Margin: space outside the border, between elements */
.element {
  margin: 30px;
  /* Adds 30px space around all sides */
}

/* Margin shorthand: top right bottom left */
.element {
  margin: 10px 20px 15px 5px;
}

/* Margin individual sides */
.element {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 5px;
}

/* Calculate total space taken by an element */

/* With default box-sizing: content-box */
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
}

/* Total width = width + left padding + right padding + left border + right border + left margin + right margin */
/* Total width = 200 + 20 + 20 + 5 + 5 + 10 + 10 = 270px */

/* Total height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin */
/* Total height = 100 + 20 + 20 + 5 + 5 + 10 + 10 = 170px */

/* With box-sizing: border-box (recommended) */
.box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
}

/* Total width including border and padding = 200px (width includes border and padding) */
/* Margin is still added outside: 200 + 10 + 10 = 220px total space */

/* Padding creates breathing room inside an element */

/* Single value: all sides */
.box {
  padding: 20px;
  /* top: 20px, right: 20px, bottom: 20px, left: 20px */
}

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

/* Three values: top, horizontal, bottom */
.box {
  padding: 10px 20px 15px;
  /* top: 10px, left & right: 20px, bottom: 15px */
}

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

/* Practical: button padding */
button {
  padding: 12px 24px;
  /* Vertical: 12px, Horizontal: 24px */
  /* Makes button easier to tap/click */
}

/* Margin creates space between elements */

/* Single value: all sides */
.box {
  margin: 20px;
  /* All sides: 20px */
}

/* Two values: vertical then horizontal */
.box {
  margin: 10px 30px;
  /* top & bottom: 10px, left & right: 30px */
}

/* Auto margin: centering */
.box {
  width: 300px;
  margin: 0 auto;
  /* Horizontal margins are auto (centering) */
  /* Vertical margins are 0 */
}

/* Common pattern: section spacing */
section {
  margin: 40px 0;
  /* Vertical spacing between sections */
  /* No horizontal margin */
}

/* Practical: list item spacing */
li {
  margin: 10px 0;
  /* Space between list items */
}

/* Border has three components: width, style, color */

/* Solid border */
.box {
  border: 2px solid #333;
}

/* Dashed border */
.box {
  border: 2px dashed #333;
}

/* Dotted border */
.box {
  border: 2px dotted #333;
}

/* Double border */
.box {
  border: 3px double #333;
}

/* Different borders on each side */
.box {
  border-top: 2px solid red;
  border-right: 3px dashed blue;
  border-bottom: 2px dotted green;
  border-left: 2px solid orange;
}

/* Remove border from one side */
.box {
  border: 2px solid #333;
  border-right: none;
  /* Top, bottom, left have borders; right does not */
}