How Does CSS Inheritance Work?

/* These inherit by default */
body {
  color: #333; /* Inherits */
  font-family: Arial; /* Inherits */
  font-size: 16px; /* Inherits */
  line-height: 1.5; /* Inherits */
}

/* These don't inherit */
div {
  border: 1px solid; /* Doesn't inherit */
  padding: 10px; /* Doesn't inherit */
  margin: 10px; /* Doesn't inherit */
  background: white; /* Doesn't inherit */
}

.child {
  /* Force inheritance */
  border: inherit;

  /* Reset to default */
  color: initial;

  /* Inherit if inheritable, else initial */
  all: unset;

  /* Revert to browser default */
  font-size: revert;
}