7

Os valores declarados com uso de porcentagem são calculados, para os quatro lados, em relação à largura (width) do elemento pai.

Veja o seguinte HTML:

<div class="pai">
    <div class="filho"></div>
</div>

<div class="pai pai-gordo">
  <div class="filho"></div>
</div>

O seguinte CSS:

.pai {
    display: inline-block;
    width: 100px;
    height: 300px;
    background-color: blue;
    margin-right: 10px;
}

.pai-gordo {
    width: 200px;
}

.filho {
    background-color: red;
    width: 50px;
    height:
    padding-top: 50%;
}

E o resultado:

inserir a descrição da imagem aqui

Os elementos filhos possuem a mesma classe filho, ou seja, ambos possuem o mesmo padding em porcentagem:

padding-top: 50%;

Entretanto o resultado mostra que o filho do elemento pai-gordo ocupa mais espaço vertical do que o filho do elemento pai, isso porque o elemento pai-gordo é mais largo e o padding-top será 50% da largura do pai.

Mas, por qual razão as propriedades padding e margin são calculadas em relação a largura do elemento pai?

1
  • 1
    CSS é cheio de coisas não muito inteligentes. É definido por comitês, onde várias pessoas diferentes, muitas delas que não são da área de design, acabam entrando em acordo onde cada um palpita um pouco, em vez de pessoas dedicadas a projetar aquilo com uma dedicação e um conhecimento um pouco mais específico. Nesse caso em especial, alguém decidiu que teria que usar um sentido só, "pra que as margens ficassem proporcionais entre si caso fosse usadas na horizontal e vertical". Mas se formos pegar uma listagem de todas as incongruências, compensa abrir um site separado pra tratar do tema.
    – Largato
    Commented 27/12/2016 às 18:08

1 Resposta 1

1

As propriedade padding e margin sempre iram usar o largura e altura do pai para realizar o calculo. Exemplo:

  • Caso você use um padding: 50% você espera que os 4 lado tenha o mesmo tamanho.
  • Caso você use um padding-top: 50% terá que ter o mesmo tamanho ao padding: 50% no topo, então o calculo também dependerá width do pai.

Isso facilita pro desenvolvedor, pois ele sabe o padding-top: 50% e mesmo valor do padding: 50%.

Parece estranho, mas isso na verdade facilita, pois no dia que você tiver uma div com padding: 50% e precisa manter apenas o padding no top o valor será o mesmo, facilitado assim a munutenção do site web site.

  • Esse é o motivo de sempre usar o valor do pai para o calculo das propriedades padding e margin, para facilitar o manutenção e padronização, assim o navegador sempre saberá que o calculo e o mesmo independente ser a propriedade e padding ou padding-top.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .