CursosEmpresasBlogLiveConfPrecios

Contenido del curso

Sitios Code con HTML y CSS

Tomar examen

box-sizing border-box explicado visualmente

Resumen

Aprender a conectar una hoja de estilos con tu HTML y dominar el modelo de caja es el primer paso para escribir CSS profesional. Aquí descubrirás cómo enlazar tu archivo styles.css, resetear los márgenes por defecto del navegador y entender por qué box-sizing: border-box evita que tu layout se rompa.

Cómo enlazo un archivo CSS a mi HTML

Lo primero es crear el archivo de estilos y avisarle al navegador que existe. Por orden, conviene crear una carpeta css y dentro un archivo llamado styles.css. Ese orden te ayudará cuando el proyecto crezca.

Dentro de tu HTML, en la etiqueta <head>, añade una etiqueta <link> que se cierra a sí misma. Necesita dos atributos: rel, que indica el tipo de recurso, y href, que apunta a la ruta del archivo.

html

<link rel="stylesheet" href="css/styles.css" />

¿Cómo verifico que mi CSS está bien enlazado? Escribe una regla rápida como body { background: red; } en tu hoja de estilos y recarga el navegador. Si el fondo se vuelve rojo, el enlace funciona. Es un truco que muchos programadores usan a diario [2:30].

Por qué uso una carpeta separada para CSS

Mantener los archivos organizados por tipo facilita la mantenibilidad. Cuando tu proyecto tenga decenas de archivos, encontrar tu hoja de estilos será cuestión de segundos.

Por qué debo resetear margin y padding al inicio

Algunos navegadores aplican estilos por defecto que generan márgenes raros alrededor de tus elementos. Si miras una imagen pegada al borde, notarás que no inicia justo donde empieza el navegador. Esa es la razón.

Para controlar todo desde cero, selecciona todos los elementos con el asterisco * y resetea tres propiedades clave:

  • margin: 0; elimina los márgenes externos por defecto.
  • padding: 0; elimina los márgenes internos por defecto.
  • box-sizing: border-box; cambia cómo se calcula el tamaño de las cajas.

css

  • { margin: 0; padding: 0; box-sizing: border-box; }

El asterisco actúa como selector universal: aplica las reglas a body, header, div, img y cualquier otra etiqueta. Es la base que necesitas antes de empezar a maquetar [4:50].

Qué hace box-sizing border-box en el modelo de caja

Todo en HTML es una cajita. Cada caja tiene contenido, padding (margen interno), borde y margen externo. Ese conjunto se llama modelo de caja y define cómo se calcula el espacio que ocupa cada elemento.

Imagina un <div> con width: 500px y height: 500px pintado de azul. Si le agregas padding: 100px sin box-sizing: border-box, el navegador suma esos 100 píxeles a cada lado. El resultado: tu cajita ya no mide 500 por 500, sino 700 por 700 píxeles.

¿Qué es box-sizing border-box? Es una propiedad CSS que obliga a la caja a respetar el ancho y alto declarados. En lugar de crecer hacia afuera al añadir padding, el espacio se descuenta del interior.

¿Por qué mi layout se rompe sin border-box? Porque el padding y los bordes se suman al ancho original, haciendo que los elementos ocupen más espacio del que esperabas y desplacen al resto.

Cómo veo el modelo de caja en el navegador

Usa el inspector de elementos haciendo clic derecho sobre cualquier elemento. Verás un globito con las medidas reales y un panel donde puedes modificar estilos en tiempo real. Si activas o desactivas box-sizing, notarás cómo la caja crece o se mantiene firme.

El padding aparece resaltado en verde o rojo según el navegador, mientras el contenido queda como un cuadrito interno más pequeño. Esa visualización es oro puro para entender qué está pasando [9:15].

Cuándo conviene usar width, height y background

Mientras pruebas y aprendes, estas tres propiedades son tus mejores aliadas para ver qué ocurre con cada cambio:

  1. width define el ancho del elemento, generalmente en píxeles.
  2. height define el alto, también en píxeles u otras unidades.
  3. background aplica un color de fondo que te permite identificar la caja a simple vista.

Combinarlas con un id único, seleccionado con el símbolo # en CSS, te permite aislar un elemento específico sin afectar al resto. Por ejemplo, #explicacion { width: 500px; height: 500px; background: blue; } selecciona solo ese div.

Después de ese reseteo inicial, cualquier estilo que escribas partirá desde una base predecible. Cuéntame en los comentarios qué medidas estás probando en tu primer layout y si border-box te cambió la forma de pensar las cajas.