¿Debo definir los márgenes de CSS en píxeles o ems? ¿Por qué? ¿Cuando?

Question

tenemos un archivo CSS con unas normas similares a las siguientes:

.directory-result ul 
{ 
    margin-top: 20px; 
    width: 60em; 

} 

.about-text 
{ 
    margin-top: 1em; 
    margin-bottom: 1em; 
} 

Todo está funcionando bien, pero nos preguntamos específicamente sobre las inconsistencias entre los valores margin-top. Uno es 20px y el otro es 1em.

¿Cuál es el mejor para ir? ¿Cuáles son los puntos que debería considerar al decidir qué usar? Gracias.

Answer 1

em unidades se utilizan para una mejor escalabilidad de la página cuando el tamaño de los elementos depende de la escala de la página. Es especialmente importante para navegadores antiguos (por ejemplo, IE6) y plataformas móviles.

px unidades se utilizan para valores absolutos, mientras que em es relativa al tamaño de fuente del elemento en particular. 1em significa una línea de fuente, p. Ej. usted tiene una caja con la fuente de tamaño 12px que significa que 1 em será igual a 12px

Además, el uso px parece más fácil porque se conoce el valor exacto, pero em unidades hereda el valor de su contenedor.

<p>Text</p> 
<div class="box"> 
    <p>Lorem</p> 
</div> 

p { 
    font-size: 1.2em; 
} 

.box { 
    font-size: 1.2em; 
} 

En este caso, la primera <p> tendrá font-tamaño igual al tamaño de fuente de base * 1.2, y la segunda <p> mostrará con la fuente de tamaño * 1,2 * 1,2.

Answer 2

Son simplemente dos formas diferentes de medir. Em está vinculado al tamaño de la fuente (tradicionalmente, 1em es aproximadamente el ancho de la letra M en un tipo de letra dado), mientras que px es píxeles.

Si construye todo usando em, todo se escalará en consecuencia cuando el usuario ajuste su tamaño de fuente (por ejemplo, utilizando el menú Página> Tamaño de texto de IE). También hace que sea más fácil para work to a vertical rhythm.

Los píxeles son mejores cuando se quiere construir algo "perfecto como un píxel". Tenga en cuenta que un píxel CSS no siempre es igual a un píxel de pantalla, principalmente porque los navegadores modernos y los dispositivos móviles permiten hacer zoom. Sin embargo, esto no suele ser un problema, ya que toda la página se escala en consecuencia.

Hagas lo que hagas, asegúrate de ser coherente en todo momento, hace la vida mucho más fácil más adelante.

Answer 3

También aquí es un muy buen tutorial en profundidad:

px – em – % – pt – keyword

Answer 4

La unidad de EMS está en relación con el tamaño de la fuente actual en el navegador. Por lo tanto, si el usuario aumenta el tamaño de la fuente *, o si cambia el tamaño de la fuente de un elemento en el CSS, los márgenes deben seguir siendo "correctos" en proporción al texto.

* (Esto deja de importar si el usuario acerque la página en lugar de aumentar el tamaño del texto (como es el valor por defecto en Firefox y Chrome ahora, y es una opción en IE).

Si está utilizando un margen para posicionar algo a un número determinado de píxeles de otra cosa, entonces obviamente debería quedarse con los píxeles.

Answer 5

En este ejemplo directory-result ul representa un bloque - algún tipo de lista/menú donde las dimensiones de píxeles son bastante importantes. No siempre podemos confiar en em que define el tamaño del texto, porque si necesitamos 20px de espacio debido a alguna imagen de fondo, bueno, necesitamos 20px, sin compromisos.

Tenga en cuenta que no puede crear y guardar la imagen, es decir, 10em de ancho, por lo tanto, no veo ninguna razón por la que deba usar unidades diferentes en una página web. Simplemente crea confusión y luego es muy difícil mantener el diseño.

Sin embargo, hay un lugar donde se recomienda utilizar em - estoy hablando de bloques de texto. Supongo que en su código about-text se coloca dentro de otro texto donde la adición de margen superior/inferior de 1em (altura del texto) tiene sentido. Es como en cualquier editor de texto (es decir, el interlineado en formato MS Word) - texto se ve mejor cuando el espaciamiento entre líneas se define multiplicando la altura del texto

Así que en mi opinión - en todas partes en donde trata con el diseño y utiliza imágenes por valor predeterminado medido en píxeles: use pixels para todo el margen/margen.

En cualquier lugar donde trabaje con texto dentro de un bloque de texto, y quiera agregar espacios entre los nodos de texto, use em.