Cada elemento es una caja.
width: El ancho de la caja.
height: El alto de la caja.
max-width: El ancho máximo (también max-height).
aspect-ratio: La proporción ancho/alto.
Cada elemento es una caja: contenido, relleno (padding), borde y margen. Aquí, su tamaño y sus espacios.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El ancho de la caja. En porcentaje, respecto a su contenedor.
Valores: auto, 300px, 50%, 20rem, fit-content, min-content, max-content
Esencial. El alto de la caja. Mejor no fijarlo en cajas con texto: si el texto crece, se sale.
Valores: auto, 200px, 100vh, 100dvh
El ancho mínimo: la caja no se estrecha más (también min-height).
Valores: 0, 10rem, min-content
Esencial. El ancho máximo (también max-height). Con margin-inline: auto centra un bloque de lectura cómoda.
Valores: none, 60ch, 1200px, 100%
Esencial. La proporción ancho/alto. Con el ancho fijado, el alto se calcula solo.
Valores: 16 / 9, 1, 4 / 3, auto
Esencial. Qué mide width: solo el contenido (content-box, por defecto) o contenido + relleno + borde (border-box, mucho más cómodo).
Valores: content-box, border-box
📌 Nota. Casi todas las hojas de estilo empiezan con *, *::before, *::after { box-sizing: border-box; }.
Esencial. El relleno: espacio entre el contenido y el borde. Con 1, 2, 3 o 4 valores (arriba, derecha, abajo, izquierda). Por lados: padding-top, -right, -bottom, -left, padding-inline, padding-block.
Valores: 1rem, 1rem 2rem, 0.5rem 1rem 2rem
Esencial. El margen: espacio fuera del borde, entre cajas. Admite auto (centra un bloque con ancho) y valores negativos. Los márgenes verticales entre bloques se funden (se queda el mayor). Por lados: margin-top…, margin-inline, margin-block.
Valores: 1rem, 0 auto, 2rem 0, -1rem
Margen en la dirección del texto (izquierda y derecha en español). Las propiedades «lógicas» (-inline, -block) funcionan igual en idiomas que se escriben de derecha a izquierda o en vertical. También margin-block, padding-inline, padding-block.
Valores: auto, 1rem 2rem (inicio y fin)
El ancho en la dirección del texto (en español, igual que width). También block-size (alto), min-inline-size, max-block-size…
Valores: como width
Código del tema: .caja { width: 50%; }
Cada elemento es una caja: contenido, relleno (padding), borde y margen. Aquí, su tamaño y sus espacios.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El ancho de la caja. En porcentaje, respecto a su contenedor.
Valores: auto, 300px, 50%, 20rem, fit-content, min-content, max-content
Esencial. El alto de la caja. Mejor no fijarlo en cajas con texto: si el texto crece, se sale.
Valores: auto, 200px, 100vh, 100dvh
El ancho mínimo: la caja no se estrecha más (también min-height).
Valores: 0, 10rem, min-content
Esencial. El ancho máximo (también max-height). Con margin-inline: auto centra un bloque de lectura cómoda.
Valores: none, 60ch, 1200px, 100%
Esencial. La proporción ancho/alto. Con el ancho fijado, el alto se calcula solo.
Valores: 16 / 9, 1, 4 / 3, auto
Esencial. Qué mide width: solo el contenido (content-box, por defecto) o contenido + relleno + borde (border-box, mucho más cómodo).
Valores: content-box, border-box
📌 Nota. Casi todas las hojas de estilo empiezan con *, *::before, *::after { box-sizing: border-box; }.
Esencial. El relleno: espacio entre el contenido y el borde. Con 1, 2, 3 o 4 valores (arriba, derecha, abajo, izquierda). Por lados: padding-top, -right, -bottom, -left, padding-inline, padding-block.
Valores: 1rem, 1rem 2rem, 0.5rem 1rem 2rem
Esencial. El margen: espacio fuera del borde, entre cajas. Admite auto (centra un bloque con ancho) y valores negativos. Los márgenes verticales entre bloques se funden (se queda el mayor). Por lados: margin-top…, margin-inline, margin-block.
Valores: 1rem, 0 auto, 2rem 0, -1rem
Margen en la dirección del texto (izquierda y derecha en español). Las propiedades «lógicas» (-inline, -block) funcionan igual en idiomas que se escriben de derecha a izquierda o en vertical. También margin-block, padding-inline, padding-block.
Valores: auto, 1rem 2rem (inicio y fin)
El ancho en la dirección del texto (en español, igual que width). También block-size (alto), min-inline-size, max-block-size…
Valores: como width