¿Por qué los porcentajes de margen/relleno en CSS siempre se calculan en función del ancho?
Si observa la especificación del modelo de caja CSS , observará lo siguiente:
El porcentaje de [margen] se calcula con respecto al ancho del bloque contenedor del cuadro generado. Tenga en cuenta que esto también es válido para el "margen superior" y el "margen inferior". Si el ancho del bloque contenedor depende de este elemento, entonces el diseño resultante no está definido en CSS 2.1. (el énfasis es mío)
Esto es realmente cierto. Pero por qué ? ¿Qué diablos obligaría a alguien a diseñarlo de esta manera? Es fácil pensar en escenarios en los que desee, por ejemplo, que algo determinado esté siempre un 25% por debajo de la parte superior de la página, pero es difícil encontrar alguna razón por la que desee que el relleno vertical sea relativo al tamaño horizontal de el padre.
Aquí hay un ejemplo del fenómeno al que me refiero:
<div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;">
This div is 200x800.
<div style="border: 1px solid blue; margin: 10% 0 0 10%;">
This div has top-margin of 10% and left-margin of 10% with respect to its parent.
</div>
</div>
http://jsfiddle.net/8JDYD/
Transfiriendo mi comentario a una respuesta, porque tiene sentido lógico. Sin embargo, tenga en cuenta que se trata de una conjetura infundada. El razonamiento real de por qué la especificación está escrita de esta manera aún se desconoce técnicamente.
La altura del elemento está definida por la altura de los niños. Si un elemento tiene padding-top: 10% (en relación con la altura del padre), eso afectará la altura del padre. Dado que la altura del niño depende de la altura del padre, y la altura del padre depende de la altura del niño, tendremos una altura inexacta o un bucle infinito. Claro, esto solo afecta el caso en el que el padre compensado === padre, pero aún así. Es un caso extraño y difícil de resolver.
Actualización: Es posible que las últimas dos oraciones no sean del todo precisas. La altura del elemento hoja (niño sin hijos) tiene un efecto en la altura de todos los elementos encima de él, por lo que esto afecta a muchas situaciones diferentes.
Para que el margen "n%" (y el relleno) sea el mismo para el margen superior/margen derecho/margen inferior/margen izquierdo, los cuatro deben ser relativos a la misma base. Si arriba/abajo usara una base diferente a izquierda/derecha, entonces el margen "n%" (y el relleno) no significaría lo mismo en los cuatro lados.
(También tenga en cuenta que tener el margen superior/inferior en relación con el ancho permite un truco de CSS extraño que le permite especificar un cuadro con una relación de aspecto que no cambia... incluso si se cambia la escala del cuadro).
