Как измеряется измерение CSS em для измерения высоты или границы?

Question

Я понимаю, что измерение «em» является относительной единицей размера шрифта относительно размера шрифта содержащего элемента, если оно указано в абсолютной единице, такой как px, или в размере шрифта по умолчанию в браузере.

Но я пытаюсь понять, как работает em в качестве измерения радиуса границы элемента box, например div. Я предполагаю, что это связано с тем, как использовать em в качестве измерения ширины или высоты коробки.

Относится ли это к размеру шрифта? Как конкретно это измеряется? Объяснения о том, как вычисляется радиус границы, который я смог найти, как представляется, основываются на единицах px.

Answer 1

Возможно, вы недооцениваете вопрос, но я думаю, что он работает именно так. Если размер шрифта равен 12px, и вы создадите прямоугольник с радиусом границы 1em, тогда он будет иметь радиус границы 12px (13px, если он равен 13px). Это полезно, если вам нужен радиус рамки, чтобы оставаться в том же соотношении с текстом, независимо от размера текста. Для моментов, если вы имели коробку с текстом в нем, позволяет сказать:

<style> 
    // lets say the browser gives the text a default size of 16px on a pc 
    .box {border-radius:5px}// lets say the box's size scales with the text 
</style> 

Это будет выглядеть так, как будто коробка была почти полностью круглые углы. Но, скажем, на iphone, текст дает размер по умолчанию 80px (преувеличение), казалось бы, в коробке были практически плоские углы. Решение состоит в том, чтобы иметь углы окна с текстом, используя em.

Answer 2

Похоже, что это связано с размером шрифта. В конце концов, это все еще единица измерения, например, px.

example может дать вам более полное представление о том, как это работает.

Markup:

<div id="A"></div> 
<div id="B"></div> 
<div id="text-height"></div> 
<p>Some text</p> 

<div id="C"></div> 
<div id="D"></div> 

CSS:

p { 
    line-height: 1em; 
    background: grey; 
    display: inline-block; 
    position: relative; 
    top: -4px; 
} 
#A { 
    height: 4em; 
    background: red; 
    width: 1em; 
    display: inline-block; 
} 
#B { 
    height: 2em; 
    background: blue; 
    width: 1em; 
    display: inline-block; 
} 
#text-height { 
    height: 1em; 
    background: green; 
    width: 1em; 
    display: inline-block; 
} 
#C, #D { 
    height: 4em; 
    width: 4em; 
    display: inline-block; 
} 
#C { 
    border-radius: 2em; 
    background: red; 
} 
#D { 
    border-radius: 1em; 
    background: blue; 
} 

Изображение:

Answer 3

Я пробовал это в браузере и it is still relative to the font-size property of the element. Если размер шрифта не определен, он наследуется от следующего родителя с размером шрифта или по умолчанию для браузера (which is 16px usually; TIL).