Se você observar as especificações do modelo da caixa CSS , observará o seguinte:
A porcentagem [margem] é calculada com relação à largura do bloco contendo a caixa gerada. Observe que isso também é válido para 'margin-top' e 'margin-bottom'. Se a largura do bloco contido depender desse elemento, o layout resultante será indefinido no CSS 2.1. (ênfase minha)
Isto é realmente verdade. Mas porque ? O que diabos obrigaria alguém a projetá-lo dessa maneira? É fácil pensar em cenários em que você deseja, por exemplo, uma certa coisa sempre a 25% abaixo da parte superior da página, mas é difícil encontrar qualquer motivo para desejar que o preenchimento vertical seja relativo ao tamanho horizontal de o pai.
Aqui está um exemplo do fenômeno ao qual estou me referindo:
<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>
height: 10%; width: 10%
que não receberá um elemento quadrado, também.
Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).
Assim vai ambas as maneiras
margin: 25%
realmente significa. Não seria uma margem uniforme, mesmo que o código sugira que seja. Não tenho evidências para apoiar isso, mas parece razoável.