¿Cómo funciona la herencia en CSS y qué propiedades se heredan?

La herencia en CSS es un mecanismo por el cual ciertas propiedades de estilo aplicadas a un elemento padre son transmitidas automáticamente a sus elementos hijos. Si un elemento hijo no tiene un valor explícitamente definido para una propiedad heredable, tomará el valor de esa propiedad de su elemento padre. Esto ayuda a mantener la consistencia y a reducir la duplicación de código.

No todas las propiedades CSS se heredan por defecto. La decisión de si una propiedad es heredable o no se basa generalmente en el sentido común: las propiedades que afectan a la presentación del texto suelen heredarse, mientras que las que afectan al layout o al modelo de caja no suelen hacerlo para evitar efectos no deseados.

Propiedades que comúnmente se heredan:

• Propiedades de texto: color, font-family, font-size, font-weight, font-style, line-height, letter-spacing, text-align, text-indent, text-transform, word-spacing.
• Visibilidad: visibility.
• Cursor: cursor.
• Estilos de lista: list-style, list-style-type, list-style-position, list-style-image.

Propiedades que comúnmente NO se heredan:

• La mayoría de las propiedades del modelo de caja: margin, padding, border, width, height.
• Propiedades de fondo: background-color, background-image, etc.
• Propiedades de posicionamiento y layout: position, top, right, bottom, left, float, clear, display, z-index, overflow.

Ejemplo:

<div style="color: navy; font-family: Verdana, sans-serif; border: 1px solid black;">
  <p>Este párrafo hereda el color 'navy' y la fuente 'Verdana' del div padre.</p>
  <p style="color: green;">Este párrafo tiene su propio color 'green', que anula el heredado, pero sigue heredando la fuente 'Verdana'.</p>
  <span>El borde del div padre no se hereda a este span.</span>
</div>
Lenguaje del código: PHP (php)

La herencia puede ser anulada aplicando un valor diferente directamente al elemento hijo. Además, puedes forzar la herencia de cualquier propiedad (incluso las no heredables por defecto) utilizando el valor inherit para esa propiedad en el elemento hijo (ej. border: inherit;).