CSS - Unidades de medida

Antes de comenzar el ejercicio real, nos gustaría dar una breve idea sobre las unidades de medida CSS. CSS admite una serie de medidas que incluyen unidades absolutas como pulgadas, centímetros, puntos, etc., así como medidas relativas como porcentajes y unidades em. Necesita estos valores al especificar varias medidas en sus reglas de estilo, p. Ej.border = "1px solid red".

Hemos enumerado todas las unidades de medida CSS junto con los ejemplos adecuados:

Unidad Descripción Ejemplo
% Define una medida como un porcentaje relativo a otro valor, normalmente un elemento envolvente. p {tamaño de fuente: 16pt; altura de línea: 125%;}
cm Define una medida en centímetros. div {margen inferior: 2 cm;}
em Una medida relativa para la altura de una fuente en espacios em. Debido a que una unidad em es equivalente al tamaño de una fuente determinada, si asigna una fuente a 12 puntos, cada unidad "em" sería 12 puntos; por lo tanto, 2em serían 24 puntos. p {espacio entre letras: 7em;}
ex Este valor define una medida relativa a la altura x de una fuente. La altura x está determinada por la altura de la letra x minúscula de la fuente. p {tamaño de fuente: 24pt; altura de línea: 3ex;}
en Define una medida en pulgadas. p {espaciado entre palabras: .15in;}
mm Define una medida en milímetros. p {espaciado entre palabras: 15 mm;}
ordenador personal Define una medida en picas. Una pica equivale a 12 puntos; por tanto, hay 6 picas por pulgada. p {tamaño de fuente: 20pc;}
pt Define una medida en puntos. Un punto se define como 1/72 de pulgada. cuerpo {tamaño de fuente: 18pt;}
px Define una medida en píxeles de la pantalla. p {relleno: 25px;}