Medir com Porcentagem

Olá, Nícolas.

A porcentagem sempre pega o valor do da propriedade pai como referência. Por exemplo, imagine que você tenha um <article> que tem uma largura de 200px (width: 200px), uma altura de 100px (height: 100px) e o tamanho da fonte como 10px (font-size: 10px), dentro dele você também tem um <p> que fará uso só de porcentagem para definir a lagura, altura e tamanho da fonte:

article {
    width: 200px;
    heigth: 100px;
    font-size: 10px;
}

p {
    width: 50%;
    height: 50%;
    font-size: 200%;
}

Lembre-se que sempre o pai (nesse casso o <article> é o pai do <p>) por tanto as medidas de <p> ficará asssim: como definimos 50% de largura e altura, nosso <p> terá exatamente metade da largura e altura de seu pai, sendo asssim ele ficará com 100 de largura e 50 de altura. Agora a propriedade font-size está com 200%, por tanto terá o dobro do tamanho da fonte do pai que nesse caso é 20px.

Outra coisa interessante que temos quando estamos falando de porcentagem é o funcionamento dela em outras propriedades que não sejam as: width, height e font-size. Por exemplo, se utilizarmos porcentagem para a propriedade margin-top qual será a propriedade do pai que será pega como referência?

Aqui que está a pegadinha. Se usarmos em qualquer propriedade que não seja as: width, height e font-size. O filho sempre pegará a propriedade width como referência. Pra ver se entendemos vamos aplicar uma margem no top de 50%:

article {
    width: 200px;
    heigth: 100px;
    font-size: 10px;
}

p {
    width: 50%;
    height: 50%;
    font-size: 200%;

    margin-top: 50%; //Adicionamos essa linha :-) 
}

O valor em pixel do margin-top será 100px que é exatamente metade do valor da propriedade width que definimos no pai o elemento <article>.

Fez sentido? Se ficou alguma dúvida é só falar :-)

Fez sentido? Se ficou alguma dúvida é só falar :-)

Claro que não kk, explicou até bem demais, agora eu entendi como funciona, muito obrigado ^^.

Fico feliz Nícolas :-)

Tento mais dúvidas é só colocar no forum que a galera responde ;-)

Tranquilo ^^. Valeu. Partiu estudar! =)