CSS
Revisa valores CSS, números, porcentajes, longitudes absolutas y relativas, ángulos, tiempos y unidades vinculadas al viewport, fuente y contenedor.
Cada propiedad acepta una gramática de valores concreta.
.card {
inline-size: 20rem;
opacity: 0.8;
color: oklch(60% 0.18 280);
}<number> → 1.5
<integer> → 3
<length> → 2rem
<percentage> → 50%
<angle> → 45deg
<time> → 200ms
<color> → red, #fff, oklch(...)
<image> → url(...), gradient(...)
<custom-ident>→ nombres definidos por autorborder-width: 1px;px es una unidad CSS, no siempre un píxel físico del dispositivo.
Unidades físicas como cm, mm o in se usan principalmente en impresión y no garantizan medida física exacta en pantalla.
font-size: 1rem;
padding: 1em;em: depende del font-size del elemento en la propiedad consumidora.rem: depende del font-size raíz.ch: ancho aproximado del carácter cero de la fuente.lh: line-height del elemento.rlh: line-height raíz.ch no representa el ancho promedio de cualquier texto.
El referente cambia según la propiedad:
width: 50%;
translate: 50% 0;
padding-inline: 5%;No asumas que todo porcentaje usa el mismo contenedor o eje.
min-height: 100dvh;vw, vh: viewport tradicional.svh: viewport pequeño estable.lvh: viewport grande.dvh: viewport dinámico.En mobile, 100vh puede no coincidir con el área visible mientras cambian las barras del navegador.
.card-title {
font-size: clamp(1rem, 4cqi, 2rem);
}cqw, cqh, cqi, cqb, cqmin y cqmax dependen del query container elegible.
grid-template-columns: 1fr 2fr;fr distribuye espacio flexible en Grid después de considerar restricciones y tamaños intrínsecos. No equivale a porcentaje simple.
rotate: 0.25turn;
transition-duration: 180ms;Usa unidades coherentes. 0 puede escribirse sin unidad en muchos contextos, pero no en todos.
display: grid;
width: auto;
position: sticky;Las keywords forman parte de la gramática de cada propiedad. auto no significa lo mismo en width, margin, inset o grid tracks.
auto cambia de significado según la propiedad.¿Por qué padding: 5% no necesariamente se calcula desde la altura del contenedor?
Porque los porcentajes de padding se resuelven respecto al inline size del containing block según las reglas de la propiedad.
Funciones matemáticas combina valores fluidos y límites.