Margines i dopełnienie przy użyciu em

Question

Po zastosowaniu elementu 1em przyjmuje wartość domyślną przeglądarki (zwykle 16 pikseli) lub wartość rozmiaru czcionki dla jej elementu nadrzędnego, w prawo ?. Ale zauważyłem, że jeśli użyję czegoś takiego jak margin-top: 1em w elemencie h1 (bez użycia resetowania arkusza stylów, a zatem h1 jest ustawione na font-size: 32px), to 1em jest równe 32px, nawet jeśli jego element nadrzędny jest ustawiony na font-size: 16px.

Jednak używając czegoś takiego jak rozmiar czcionki: 100%; rozwiązuje rozbieżność.

Czego mi brakuje?

Answer 1

Kiedy 1em jest stosowane do elementu, przyjmuje domyślną wartość przeglądarki (zazwyczaj 16 pikseli) lub wartość rozmiaru czcionki swojego rodzica, prawda?

Nie, to trwa własnyfont-size, obliczony na podstawie jego rodzica (lub domyślnej przeglądarki dostarczanej wartości). Ponieważ dostarczona przez przeglądarkę font-size z h1 ma 32 piksele, wynikowy margines wynosi 32 piksele.

Jednak używając czegoś takiego jak rozmiar czcionki: 100%; rozwiązuje rozbieżność.

Ustawiając font-size: 100%; lub font-size: 1em; na elemencie, mówisz go używać 100% rozmiaru czcionki rodzica, więc ustawienie 1em jako długości na cokolwiek innego pójdą że 100%.

Answer 2

1em jest równy rozmiarowi czcionki elementu w pytaniu. Więc używając go z marginesami, będzie to odpowiednik rozmiaru czcionki elementu, na który aplikujesz margines.