em означает «эфемерная единица», это относительно текущего размера шрифта его родительского элемента. Например, текст в заголовке <h1> по умолчанию равен 2em. Это связано с тем, что <h1> наследует размер текста от своего родительского элемента, <body> документа. Если я установлю свой <body> размер шрифта на 16 пикселей (размер шрифта: 16 пикселей;). Мой <h1>, являющийся 2em, унаследовал бы размер 32px, потому что 2em в два раза больше 1em. В этом случае 1em = 16px, поэтому 2em = 2x16px = 32px. Теперь, если вы создаете HTML-документ со следующим
<body>
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</body>
Затем вы определяете следующее правило CSS.
body {font: normal 16px Arial, Helvetica, sans-serif;}
Откройте страницу в веб-браузере (Chrome) и откройте инструменты разработки браузеров (ctrl+shift+I), вы увидите, что размер шрифта по умолчанию для <h1> равен 2em. На вкладке стилей вы также увидите, что она «унаследована от тела».
Находясь в инструментах разработки для этого сценария, вы можете увидеть на диаграмме Box Model, что поле <h1> составляет 21,440px на верхнем и нижнем полях. Если вы посмотрите на значения по умолчанию CSS для <h1>, вы увидите, что margin-block-start: 0.67em; и margin-block-end: 0.67em; Помните, что размер зависит от размера шрифта родительского элемента, поэтому 0,67em - от размера шрифта <h1>, а не от шрифта. размер <body>, вы можете проверить это с небольшой математикой, 0,67em x 32px = 21,440px, и это размер поля <h1> на диаграмме Box Model. Для получения дополнительной информации попробуйте http://www.123webconnect.com/convert-px-em.php