Описание тега em

В полиграфии и типографии em- ширина заглавного символа "M" в данном шрифте и кегле. Это относительная единица ширины, которая автоматически масштабируется с размером шрифта.

Половина em является en, что неудивительно, это ширина символа "N".

В css,emможно указать как единицу измерения. В CSSem вовсе не представляет ширину â € œMâ €, а скорее высоту текущего шрифта. Из спецификации CSS3:

em unit

Равно вычисленному значению â € ˜ font-sizeâ € ™ свойство элемента, на котором оно используется.

(font-size" указывает желаемую высоту глифов шрифта.")

В em unit в CSS - это относительная единица, основанная на font-sizeродительского элемента. Например, предположим, что у вас есть следующий HTML-код:

<div class="parent1" style="font-size: 20px">
  <p style="font-size: 2.0 em">First paragraph</p>
</div>

<div class="parent2" style="font-size: 35px">
  <p style="font-size: 1.8 em">Second paragraph</p>
</div>

Также em влияет на те же свойства стиля элемента для eaxmple:

.post{
  font-size: 16px;
  border-radius: .5 em;
}

Здесь border-radius будет 16 * 0,5 = 8 пикселей

В приведенном выше примере вы обнаружите, что первый абзац font-size меньше, чем во втором абзаце font-size несмотря на то, что первое больше второго в em. Это потому, что родительский элемент первого абзацаdiv, имеет абсолютный размер шрифта 20px, что меньше 35px размер шрифта второго div.