¿Cómo se miden las medidas de CSS em para medir la altura o el radio del borde?

Question

Entiendo que la medida "em" es una unidad relativa para tamaño de fuente, relativa al tamaño de letra del elemento contenedor si se especifica en una unidad absoluta como px, o al tamaño de fuente predeterminado en el navegador.

Pero estoy tratando de entender cómo funciona el uso de em como una medida para el radio del borde de un elemento de caja, como un div. Supongo que está relacionado con el uso de em como una medida para el ancho o alto de una caja.

¿Sigue relacionado con el tamaño de fuente? ¿Cómo, específicamente, se mide? Las explicaciones de cómo se calcula el radio de borde que he podido encontrar parecen basarse en unidades de px.

Answer 1

Puede que esté malentendiendo su pregunta, pero creo que funciona así. Si el tamaño de fuente es 12px y usted hace una caja con un radio de borde de 1em, entonces tendrá un radio de borde de 12px (13px si es 13px). Esto es útil si necesita que el radio del borde de la caja permanezca en la misma proporción que el texto, independientemente del tamaño del texto. Por instantes, si usted tenía un cuadro con el texto en ella, digamos:

<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> 

Se vería como si la caja tenía casi completamente esquinas redondas. Pero digamos que en un iPhone, le da al texto un tamaño predeterminado de 80px (exageración), parecería que la caja tenía esquinas prácticamente planas. La solución es hacer que las esquinas de la caja se escalen con el texto usando em.

Answer 2

Parece que está relacionado con el tamaño de fuente. Al final sigue siendo una unidad de medida, como px.

Esto example puede darle una mejor idea de cómo funciona.

de marcado:

<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; 
} 

Image:

Answer 3

Intenté esto en el navegador y it is still relative to the font-size property of the element. Si el tamaño de fuente no está definido, hereda del siguiente elemento primario que tiene un tamaño de fuente, o el navegador por defecto (which is 16px usually; TIL).