05.padding.css

/* Padding */

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;

  border: 1px solid black;
}

.p1 {
  width: 300px;
  border: 1px solid brown;
  padding: 10px;
  /* width total: 300 + 1 + 1 + 10 + 10 = 322 px */
}

.p2 {
  width: 300px;
  border: 1px solid brown;
  padding: 10px;
  box-sizing: border-box;
  /* width: 300px */
}