HTML / CSS básico – margen y comportamiento de visualización

Tengo una pregunta básica sobre HTML / CSS y el comportamiento de los márgenes de ciertos elementos.
Para aclarar mi punto de vista, creé este violín: http://jsfiddle.net/5VA5h/

Verás, apliqué algún tipo de “reinicio” y agregué algunos estilos a todos los h1 .
En el primer ejemplo, el margin de h1 se aplica en el exterior de la caja, mientras que en #c , donde h1 se configura display: inline; , se aplica dentro de la caja.

¿Por qué esto es tan?

En su primer ejemplo, con

como un elemento de bloque, el margen superior está colapsando (el énfasis es mío):

En CSS, los márgenes adyacentes de dos o más cuadros (que pueden ser o no hermanos) se pueden combinar para formar un solo margen. Se dice que los márgenes que se combinan de esta manera se colapsan, y el margen combinado resultante se llama margen colapsado.

…y después:

Dos márgenes son contiguos si y solo si:

  • ambos pertenecen a cuadros de nivel de bloque en flujo que participan en el mismo contexto de formato de bloque
  • no hay casillas de línea, espacio libre, relleno ni borde que las separe (tenga en cuenta que ciertas casillas de línea de altura cero (vea 9.4.2) se ignoran para este propósito).
  • ambos pertenecen a bordes de caja adyacentes verticalmente, es decir, forman uno de los siguientes pares:
    • margen superior de una caja y margen superior de su primer elemento secundario en flujo
    • margen inferior de la caja y margen superior de su próximo flujo de entrada después del hermano
    • margen inferior de un último elemento secundario en flujo y margen inferior de su principal si el principal tiene la altura calculada “auto”
    • Márgenes superior e inferior de un cuadro que no establece un nuevo contexto de formato de bloque y que tiene cero ‘altura mínima’ calculada, cero o ‘auto’ ‘altura’ calculada, y no hay elementos secundarios en flujo

El segundo ejemplo, con el

como un elemento en línea, los márgenes verticales no tienen efecto :

La propiedad abreviada ‘margen’ establece el margen para los cuatro lados, mientras que las otras propiedades de margen solo establecen su lado respectivo. Estas propiedades se aplican a todos los elementos, pero los márgenes verticales no tendrán ningún efecto en los elementos en línea no reemplazados .

Margin-Top y Margin-Bottom no son utilizados por los elementos con display: inline; Ver: margen superior en el elemento en línea

Los márgenes superior e inferior en los elementos en línea no son importantes. En los elementos en línea, cada elemento representa una palabra en un texto.