1
resposta

Sobre EM e REM

Gostaria de saber um bom vídeo ou artigo explicativo sobre as principais diferenças entre essas duas unidades de medidas e quando usá-las, pois foi a parte que menos entendi ao longo dos cursos =/. Agradeço!

1 resposta

Talvez esse artigo possa te ajudar de forma descomplicada https://pingback.com/papodedev/css-rem-vs-em-vs-px-qual-usar

Mas basicamente a diferença é: REM pega o tamanho do font-size da tag HTML enquanto que o EM pega o tamanho do font-size da tag pai.

Exemplo:

<html style="font-size:20px">
    <body>
        <div style="font-size:10px">
            <p id="id1" style="font-size:2rem">Texto 1</p>
            <p id="id2" style="font-size:2em">Texto 2</p>
            <p id="id3" style="font-size:40px">Texto de 40px</p>
            <p id="id4" style="font-size:20px">Texto de 20px</p>
        </div>
    </body>
</html>

O tamanho do texto em <p id="id1"> será de 2REM = 2*(font-size do HTML) = 2*20 = 40 px.

O tamanho do texto em <p id="id2"> será de 2EM = 2*(font-size do elemento pai) = 2*10 = 20 px.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software