{"id":7182,"date":"2021-07-20T21:06:17","date_gmt":"2021-07-20T19:06:17","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/was-ist-der-unterschied-zwischen-px-em-rem-vw-und-vh\/"},"modified":"2026-09-29T16:35:58","modified_gmt":"2026-09-29T14:35:58","slug":"was-ist-der-unterschied-zwischen-px-em-rem-vw-und-vh","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/de\/was-ist-der-unterschied-zwischen-px-em-rem-vw-und-vh\/","title":{"rendered":"Was ist der Unterschied zwischen PX, EM, REM, %, VW und VH?"},"content":{"rendered":"\n

La diferencia entre px<\/code>, em<\/code>, rem<\/code>, %<\/code>, vw<\/code> y vh<\/code> est\u00e1 en la referencia que utiliza cada medida.<\/strong> Para decidir, piensa si el tama\u00f1o debe depender del texto, del contenedor o de la ventana. Esta tabla te ayuda a elegir sin empezar por toda la teor\u00eda de HTML.<\/p>\n\n\n\n

Qu\u00e9 significa cada unidad y cu\u00e1ndo utilizarla<\/h2>\n\n\n\n
Unidad<\/th>C\u00f3mo se calcula<\/th>Ejemplo de uso<\/th><\/tr><\/thead>
px<\/code><\/td>P\u00edxel CSS; no tiene por qu\u00e9 coincidir con un p\u00edxel f\u00edsico de la pantalla.<\/td>Un borde fino: border: 1px solid<\/code>.<\/td><\/tr>
em<\/code><\/td>En font-size<\/code>, toma el tama\u00f1o heredado; en otras propiedades, el tama\u00f1o de letra del propio elemento.<\/td>Relleno de un bot\u00f3n que crece con su texto.<\/td><\/tr>
rem<\/code><\/td>Tama\u00f1o de letra del elemento ra\u00edz, normalmente html<\/code>.<\/td>Tipograf\u00eda y espaciados con una referencia com\u00fan.<\/td><\/tr>
%<\/code><\/td>La referencia depende de la propiedad CSS. No significa siempre \u00abporcentaje del padre\u00bb.<\/td>Ancho de una tarjeta dentro de un contenedor.<\/td><\/tr>
vw<\/code><\/td>Un vw<\/code> equivale al 1 % del ancho de referencia de la ventana.<\/td>Una anchura ligada a la ventana, no a una columna.<\/td><\/tr>
vh<\/code><\/td>Un vh<\/code> equivale al 1 % de la altura de la ventana grande.<\/td>Una secci\u00f3n alta; en m\u00f3vil conviene valorar svh<\/code> o dvh<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Consulta las definiciones de longitudes CSS en MDN<\/a> y porcentajes en CSS<\/a>. Las recomendaciones de uso que siguen son criterios pr\u00e1cticos: la elecci\u00f3n final depende del dise\u00f1o y debe comprobarse en la p\u00e1gina.<\/p>\n\n\n\n

La diferencia entre em y rem, con n\u00fameros<\/h2>\n\n\n\n

Imagina una p\u00e1gina cuya ra\u00edz mide 16px<\/code>, un contenedor con texto de 20px<\/code> y un bot\u00f3n dentro. Estos valores muestran por qu\u00e9 em<\/code> y rem<\/code> no son intercambiables:<\/p>\n\n\n\n

html { font-size: 16px; }\n.contenedor { font-size: 20px; }\n.boton {\n  font-size: 1.2em; \/* 20 \u00d7 1,2 = 24px *\/\n  padding: 0.5em 1em; \/* 12px arriba\/abajo y 24px a los lados *\/\n  margin-top: 1rem; \/* 16px, a partir de la ra\u00edz *\/\n}<\/code><\/pre>\n\n\n\n
El font-size<\/code> del bot\u00f3n parte de los 20px<\/code> heredados. Despu\u00e9s, su relleno en em<\/code> utiliza los 24px<\/code> que ya tiene el propio bot\u00f3n. El margen en rem<\/code> mantiene la referencia de la ra\u00edz. Este ejemplo fija medidas para hacer visible el c\u00e1lculo; no propone fijar 16px<\/code> como configuraci\u00f3n obligatoria de tu web.<\/p>\n\n\n\n
Unidades relativas: evita conversiones autom\u00e1ticas<\/h2>\n\n\n\n
1rem<\/code> no equivale siempre a 16px<\/code>. Esa equivalencia solo se cumple cuando el tama\u00f1o calculado de la ra\u00edz es de 16 p\u00edxeles. Si cambia a 20, 1.5rem<\/code> pasa de 24 a 30 p\u00edxeles. Del mismo modo, antes de convertir em<\/code> necesitas conocer el tama\u00f1o de letra que corresponde a la propiedad que est\u00e1s ajustando.<\/p>\n\n\n\n
Al anidar elementos con font-size<\/code> en em<\/code>, cada nivel puede tomar como referencia el tama\u00f1o ya ampliado del anterior. Si quieres una escala com\u00fan entre componentes, rem<\/code> suele hacer el mantenimiento m\u00e1s predecible. Si quieres que un bot\u00f3n cambie de tama\u00f1o junto con su texto, em<\/code> resulta \u00fatil.<\/p>\n\n\n\n
Porcentajes: comprueba primero la propiedad<\/h2>\n\n\n\n
Con un bloque contenedor de 800 p\u00edxeles de ancho, una tarjeta con width: 50%<\/code> tiene un ancho de contenido de 400 p\u00edxeles en el modelo de caja habitual. En cambio, font-size: 150%<\/code> toma el tama\u00f1o de letra heredado: si este es 20, el resultado es 30 p\u00edxeles. El mismo porcentaje responde a referencias distintas.<\/p>\n\n\n\n
Tambi\u00e9n hay matices en alturas, m\u00e1rgenes y rellenos. Un height: 100%<\/code> puede no comportarse como esperas si la altura de referencia no est\u00e1 definida. En el flujo horizontal habitual, los porcentajes de padding<\/code> y margin<\/code> se resuelven respecto al ancho del bloque contenedor, incluso arriba y abajo. Por eso no conviene interpretar un relleno vertical del 10 % como el 10 % de su altura.<\/p>\n\n\n\n
Si el resultado te sorprende, inspecciona la propiedad concreta y su valor calculado. El ancho de un contenedor tampoco es necesariamente el ancho de la pantalla: puede tener un m\u00e1ximo, columnas o rellenos.<\/p>\n\n\n\n
vw, vh, svh y dvh en pantallas m\u00f3viles<\/h2>\n\n\n\n
Para una ventana de referencia de 480 \u00d7 800 p\u00edxeles CSS, 50vw<\/code> son 240 p\u00edxeles y 50vh<\/code> son 400. Pero en m\u00f3vil las barras del navegador cambian el espacio visible: 100vh<\/code> puede dejar contenido detr\u00e1s de ellas.<\/p>\n\n\n\n