Todo en la web es una caja
Cada elemento HTML, sea un párrafo, una imagen o un botón, se dibuja dentro de un rectángulo. Ese rectángulo tiene cuatro capas, y entenderlas es la diferencia entre adivinar el CSS y controlarlo.
Las cuatro capas de la caja
El padding es transparente y toma el color de fondo del propio elemento. El margin también es transparente, pero deja ver el fondo del elemento padre. El border es la única capa visible por sí misma. Mueve los controles y observa cómo cambia el espacio que la caja ocupa en la página.
Ejemplo explicado
- Con
content-box(el valor por defecto del navegador),widthmide solo el contenido. El padding y el borde se suman por fuera. - Ancho visible de la caja = width + 2 × padding + 2 × border.
- Espacio total que ocupa en la página = lo anterior + 2 × margin.
- Pon el margin en 0 y el padding en 30: la caja crece y su fondo verde crece con ella. Ahora haz lo contrario: la caja se aleja de sus vecinos, pero no crece.
box-sizing: dónde se dibuja el borde
Dos párrafos con el mismo CSS: width:200px; height:100px; border:25px solid. La única diferencia es box-sizing. Con border-box, el borde y el padding se dibujan hacia adentro y el contenido se encoge para que la caja mida exactamente lo que dice width.
Ejemplo explicado
- content-box: la caja termina midiendo 200 + 25 + 25 = 250px de ancho y 150px de alto.
- border-box: la caja mide 200 × 100, pero al contenido le quedan 150 × 50.
- Por eso muchos proyectos empiezan con
*, *::before, *::after { box-sizing: border-box; }: así los anchos en porcentaje no se desbordan al agregar padding.
Notación abreviada: de 1 a 4 valores
margin y padding aceptan de uno a cuatro valores. El orden sigue las manecillas del reloj empezando arriba: top, right, bottom, left. Escribe valores y mira a qué lado va cada uno.
margin:;Ejemplo explicado
- 1 valor: los cuatro lados iguales.
- 2 valores: el primero arriba y abajo, el segundo izquierda y derecha.
margin: 0 autocentra un bloque que tiene ancho definido. - 3 valores: arriba, los lados, abajo.
- 4 valores: arriba, derecha, abajo, izquierda. Regla mnemotécnica: el orden de un reloj.
Colapso de márgenes verticales
Este comportamiento sorprende a casi todos los estudiantes. Cuando dos bloques están uno encima del otro, su margen inferior y superior no se suman: se queda solo el mayor. Esto pasa solo con márgenes verticales; los horizontales sí se suman.
Ejemplo explicado
- Con 30px y 20px, la separación real es 30px, no 50px.
- Marca la casilla: dentro de un contenedor flex los márgenes ya no colapsan y la separación pasa a ser la suma.
- Si necesitas separación predecible entre bloques, la propiedad
gapen flex o grid evita este problema.
display: el tipo de caja
La propiedad display decide cómo se comporta la caja frente a sus vecinas. La caja azul de abajo tiene width:150px; height:56px; margin:8px; padding:6px 10px. Cambia su tipo y fíjate qué propiedades respeta y cuáles ignora.
El texto de este párrafo fluye alrededor de la caja para que veas cómo se acomoda dentro de la línea, si respeta el ancho y el alto, y si empuja a las demás palabras.
Ejemplo explicado
- block: ocupa su propia línea y respeta width, height y todos los márgenes. Ejemplos:
div,p,h1. - inline: fluye con el texto e ignora width y height; los márgenes verticales no empujan a las otras líneas. Ejemplos:
span,a,strong. - inline-block: fluye con el texto, pero respeta width, height y márgenes como un bloque. Útil para botones.
- none: no genera caja; el elemento desaparece y no ocupa espacio.
El inspector en los navegadores
Todos los navegadores modernos traen herramientas para desarrolladores. La más usada es el inspector de elementos: muestra el HTML de cualquier página, el CSS que se le aplica y el diagrama de la caja que practicaste aquí. Sirve para probar cambios antes de escribirlos en tu archivo, para encontrar por qué algo se ve mal y para ver cómo queda la página en un celular.
Los navegadores más usados
Elige un navegador para ver cómo se abre su inspector y en qué se diferencia.
Brave no aparece porque se identifica ante los sitios web como Chrome, y StatCounter lo cuenta dentro de esa cifra.
Ejemplo explicado: el motor importa más que la marca
- Un motor de renderizado es la parte del navegador que lee tu HTML y CSS y dibuja las cajas. Solo quedan tres grandes: Blink (Chrome, Edge, Opera, Brave), WebKit (Safari) y Gecko (Firefox).
- Por eso el inspector de Chrome, Edge, Opera y Brave es casi idéntico: es la misma herramienta con otra apariencia.
- Si tu página se ve bien en Chrome, casi seguro se ve igual en Edge. No hay garantía de que se vea igual en Safari o Firefox. Para probar de verdad, usa un navegador de cada motor.
Réplica del inspector
Así se ve el inspector del navegador que elegiste arriba. Haz clic en las pestañas para saber para qué sirve cada una, y pasa el mouse por el diagrama de la caja.
Ejemplo explicado: cómo leer este diagrama
- Es el
<li>seleccionado (el que dice== $0). La rutahtml › body › section#display › ul › lidice dónde está dentro del documento. - Contenido 862 × 20.802: el ancho sale del
ul, porque ellies de bloque y se estira. El alto tiene decimales porque sale delline-heightde la fuente, no de unheightescrito. - padding 0 y border 0: el
lino tiene relleno ni borde propios. - margin superior 5: separa cada ítem del anterior. El espacio vertical de cada ítem es 20.802 + 5 = 25.802px.
- En la lista de propiedades aparece
display: list-item: una caja de bloque que además dibuja la viñeta (Tema 5).
Ojo con dos detalles
- El elemento <phedra-x-ui> no es parte de la página: lo inyecta una extensión del navegador. Si algo se ve raro, prueba en una ventana de incógnito sin extensiones antes de culpar a tu CSS.
- Los cambios que hagas en el inspector no se guardan. Al recargar la página vuelve todo a como estaba. Lo que funcione lo copias a tu archivo .css.
Tres formas de abrir el inspector
- Clic derecho sobre el elemento › Inspeccionar. Es la más directa: el inspector se abre con ese elemento ya seleccionado.
- Atajo de teclado. F12 o Ctrl+Shift+I en Windows y Linux; Cmd+Option+I en Mac. En Safari primero hay que activar las funciones para desarrolladores.
- Menú del navegador. En Chrome: menú de tres puntos › Más herramientas › Herramientas para desarrolladores. Los demás tienen una ruta parecida (la ves en la ficha de cada navegador arriba).
Qué puedes hacer con el inspector
Editar texto
Doble clic sobre el texto en el árbol HTML, o clic derecho › Editar como HTML. Útil para probar cómo se ve un título más largo o para tapar datos personales antes de una captura.
Cambiar estilos
En el panel de estilos haz clic en un valor para cambiarlo, o en un espacio vacío para agregar una propiedad. La casilla junto a cada propiedad la activa o desactiva.
Ocultar o eliminar
Con un elemento seleccionado, la tecla H lo oculta en Chrome y Edge, y Supr lo elimina. Vuelve al recargar.
Deshacer
Ctrl+Z dentro del inspector deshace el último cambio, igual que en un editor de texto.
Buscar un estilo
El cuadro Filter del panel de estilos busca una propiedad entre todas las reglas, por ejemplo margin. Al pasar el mouse por un elemento se pinta su caja en la página.
Ver la página en un celular
El modo dispositivo (Ctrl+Shift+M) simula pantallas de celular y tablet, y permite simular una conexión lenta para ver cuánto tarda en cargar.
Acomodar el panel
El menú de tres puntos del inspector deja anclarlo abajo, a la izquierda, a la derecha o en una ventana aparte. Abajo es cómodo en pantallas pequeñas.
Ver los archivos que cargan
La pestaña de red lista cada archivo. Si tu estilos.css sale en rojo con 404, la ruta del <link> está mal escrita.
Cuál navegador usar para cada cosa
No hay un navegador mejor para todo. Estas son orientaciones para el curso; cada una tiene su razón.
- Haz clic derecho sobre el título "Todo en la web es una caja" y elige Inspeccionar.
- Busca el diagrama de la caja. En Chrome, Edge, Opera, Brave y Safari está en Computed; en Firefox, en Diseño. Anota el ancho del contenido.
- En el panel de estilos busca la regla
.hero h1 spany cambiapaddingpor0 2em. Mira cómo crece la caja verde. - Desmarca la casilla de
backgrounden esa misma regla y vuelve a marcarla. - Abre el modo dispositivo y revisa si el índice de temas cambió de lugar.
- Si tienes un segundo navegador de otro motor, repite el paso 2 allí y compara los números.
- Recarga con F5 y comprueba que todos tus cambios desaparecieron.
Si cambias el inspector a español
Chrome y Edge ofrecen las herramientas en español. Los tutoriales en internet casi siempre usan los nombres en inglés, así que conviene reconocer ambos. La traducción puede cambiar entre versiones.
| Inglés | Español | Para qué la usas en este tema |
|---|---|---|
| Elements | Elementos | Ver el HTML y elegir el elemento |
| Styles | Estilos | Ver y editar las reglas CSS |
| Computed | Calculado | Ver el diagrama de la caja y los valores finales |
| Layout | Diseño | Ver las rejillas de flex y grid |
| Console | Consola | Errores y pruebas de JavaScript |
| Network | Red | Comprobar si cargó tu archivo .css |
Editor en vivo
Escribe HTML y CSS a la izquierda y el resultado aparece a la derecha mientras escribes. Empieza modificando los valores del ejemplo.
Ejemplo explicado
- Abre el inspector del navegador (F12), selecciona un elemento y busca el diagrama de la caja en la pestaña Computed. Los colores son los mismos que usa este laboratorio.
- Prueba
outlineen lugar deborder: se dibuja por fuera y no ocupa espacio en el modelo de caja.
Retos por niveles
Calcula sin usar el navegador y escribe solo el número en píxeles. Si fallas, la pista te muestra qué capa estás olvidando.