Una palabra algo rara esta del inherit. Y de hecho, algo con el que desde hace poco no habia visto su importancia. Por lo mismo me interesa compartirla en este momento en que por fin sale el sol y calienta algo de este horrible frio.

Inherit = heredar.⌗

Como sabrán, en CSS existe muchas propiedades que heredan sus características a sus hijos (child). Por ejemplo, si definimos en el (como suelo hacer) que la familia tipográfica que utilizaremos será Helvetica, esto será heredado por todos los elementos que estén dentro del :

body {
  font-family: Helvetica, Arial, sans-serif;
}
<body>
  <h1>Esto será mostrado con Helvetica</h1>
  <p>Esto tambien lo hereda</p>
</body>

Esto sucede con mucha frecuencia con propiedades relacionadas con el texto: font-family, font-size, color, text-align, etc. En los casos de las propiedades que no los heredan automáticamente, podemos forzarlo a que lo hagan, precisamente explicitando inherit en esa definición del hijo, como en el siguiente ejemplo:

.contenedor {
  font-size: 14px;
  color: chocolate;
  border: 2px solid green;
  width: 500px;
}
.contenedor p {
  border: inherit;
}

Lo que sucederá en este caso, es que

heredará el tamaño de la fuente y su color por defecto ya que estará dentro del .contenedor; pero como también queremos que herede el borde, le decimos border: inherit; para que lo haga.

Ver ejemplo{.verejemplo}