Using an em value creates a dynamic or computed font size (historically the em unit was derived from the width of a capital “M” in a Giv typeface.). O valor numérico atua como um multiplicador do font-size propriedade do elemento no qual ele é usado., Considere este exemplo:
p { font-size: 2em;}neste caso, o tamanho de tipo de letra <p> elementos será o dobro do calculado font-size herdadas por <p> elementos. Por extensão, uma font-size de 1em é igual ao calculado font-size do elemento no qual ele é usado.,
Se font-size não foi definido em qualquer de <p>‘s antepassados, em seguida, 1em será igual ao padrão do navegador font-size, que normalmente é 16px. Então, por padrão, 1em é equivalente a 16px e 2em é equivalente a 32px., Se você definir um font-size de 20px no <body> elemento dizer, então 1em no <p> elementos que passaria a ser equivalente a 20px e 2em seria equivalente a 40px.,
para calcular o em equivalente, para qualquer valor de pixel necessária, você pode usar esta fórmula:
em = desired element pixel value / parent element font-size in pixels
em é muito útil unidade em CSS, pois adapta-se automaticamente o seu comprimento em relação à fonte que o leitor escolhe para usar.
um facto importante a ter em mente: os valores em compostos., Tome o seguinte HTML e CSS:
html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */}span { font-size: 1.6em;}<div><span>Outer <span>inner</span> outer</span></div>O resultado é:
Supondo que o navegador padrão do font-size é 16px, as palavras “exterior” deve ser processado em 16px, mas a palavra “interior” deve ser processado em 25,6 px. Isso é porque o interior <span>‘s font-size é de 1.6 em que é relativo ao seu pai font-size, que por sua vez é em relação ao seu pai o font-size. Isto é muitas vezes chamado de composição.