Margine e riempimento utilizzando em

Question

Quando 1em viene applicato a un elemento, assume il valore predefinito del browser (in genere 16px) o il valore della dimensione carattere del relativo elemento principale, giusto ?. Ma ho notato che se utilizzo qualcosa come margin-top: 1em in un elemento h1 (senza utilizzare un foglio di stile di reimpostazione, e quindi, h1 è impostato su font-size: 32px), 1em è uguale a 32px, anche se l'elemento padre è impostato su font-size: 16px.

Tuttavia, l'utilizzo di qualcosa come dimensione del carattere: 100%; risolve la discrepanza.

Cosa mi manca?

Answer 1

Quando 1em viene applicato a un elemento, esso prende il valore predefinito del browser (in genere 16px) o il valore della dimensione carattere del suo genitore, giusto?

No, ci vuole propriofont-size, calcolato sulla base di suo genitore (o il valore di default sul browser in dotazione). Poiché il font-size del h1 fornito dal browser è 32 pixel, il margine risultante è 32 pixel.

Tuttavia, utilizzando qualcosa come dimensione del carattere: 100%; risolve la discrepanza.

Impostando font-size: 100%; o font-size: 1em; su un elemento, che stai dicendo in modo da utilizzare il 100% della dimensione del carattere del suo genitore, in modo da impostare 1em come una lunghezza su qualsiasi altra cosa seguirà che il 100%.

Answer 2

1em è uguale alla dimensione del carattere dell'elemento nella domanda. Quindi quando lo si usa con i margini, sarà equivalente alla dimensione del font dell'elemento che si sta applicando anche al margine.