Arquitectura CSS

CSS Box Model

Cómo el navegador calcula tamaños, espacios y límites

El Box Model es la base real del diseño web en CSS. En este módulo aprenderás cómo el navegador interpreta cada elemento como una caja, cómo se calculan sus dimensiones, cómo influyen el padding, los bordes y los márgenes, y cómo evitar errores clásicos que rompen layouts y grillas.

Diagrama del CSS Box Model mostrando content, padding, border y margin
El Box Model explica cómo el navegador mide, separa y renderiza cada elemento en pantalla.
1

Box Model en CSS: Todo Elemento es una Caja

El Box Model es el concepto base del diseño web: **cada elemento HTML se representa como una caja rectangular**. No importa si ves texto, imágenes o botones, el navegador siempre trabaja con cajas. Comprender esto es clave para dominar márgenes, rellenos y tamaños en CSS.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<!-- Un encabezado también es una caja -->
<h1>Título principal</h1>

<!-- Un párrafo ocupa su propio rectángulo -->
<p>Este texto vive dentro de una caja.</p>

<!-- Incluso una imagen tiene límites rectangulares -->
<img src="foto.jpg" alt="Imagen de ejemplo">
Elementos HTML delineados mostrando que todos son cajas rectangulares
Aunque visualmente no lo parezca, el navegador siempre trabaja con cajas rectangulares.
2

Elementos de Bloque y de Línea en CSS

Las cajas no se comportan todas igual. CSS distingue principalmente entre **elementos de bloque** y **elementos de línea**, lo que define cómo se posicionan en el documento.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
/* Elementos de bloque */
div {
  display: block;
  /* Ocupan todo el ancho disponible */
}

/* Elementos de línea */
span {
  display: inline;
  /* Solo ocupan el ancho de su contenido */
}
Comparación visual entre elementos de bloque y elementos de línea
Los elementos de bloque se apilan verticalmente; los de línea se ubican uno junto a otro.
3

Estructura Interna del Box Model

Cada caja en CSS está formada por **cuatro capas bien definidas**. Conocer este orden es esencial para evitar errores de diseño y cálculos incorrectos.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<!-- Contenido principal -->
<div>
  Texto o imagen
</div>

<!-- El contenido se rodea de padding, borde y margen -->
Diagrama del box model con content, padding, border y margin
El orden correcto es: Content → Padding → Border → Margin.
4

Definir Tamaño con Width y Height

Las propiedades `width` y `height` controlan el tamaño del **contenido** de una caja. Son fundamentales para estructurar layouts y componentes.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
/* Caja con dimensiones fijas */
.caja {
  width: 400px;   /* Ancho del contenido */
  height: 250px;  /* Alto del contenido */
  background-color: #eee;
}

/* No existen valores negativos */
Caja con ancho y alto definidos en CSS
Width y height solo afectan al área de contenido.
5

Qué es el Overflow en CSS

Cuando el contenido supera el tamaño de su caja, ocurre un **desbordamiento**. CSS permite controlar este comportamiento mediante la propiedad `overflow`.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<div class="caja">
  Texto muy largo que no entra en el espacio disponible
</div>

<!-- El texto puede salirse si la caja es pequeña -->
Texto saliéndose de una caja pequeña
El desbordamiento es una causa común de layouts rotos.
6

Control del Desbordamiento con Overflow

La propiedad `overflow` define cómo se comporta el contenido excedente dentro de una caja.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
/* Oculta el contenido excedente */
.caja {
  overflow: hidden;
}

/* Scroll automático solo si es necesario */
.panel {
  overflow-y: auto;
}
Ejemplos de overflow visible, hidden y scroll
Elegir correctamente overflow evita problemas visuales.
7

Padding: Espacio Interno del Elemento

El padding crea espacio entre el contenido y el borde de una caja, mejorando la legibilidad y la estética.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<button>
  Botón sin padding
</button>

<!-- El padding separa el texto del borde -->
Comparación de botón con y sin padding
Un buen padding mejora la experiencia visual.
Publicidad
htmlCssOnlineCourseResponsiveWebDesignFromScratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs
Ver próximas fechas
9

Sintaxis del Padding en CSS

El padding puede declararse por lado o usando la forma abreviada siguiendo el sentido de las agujas del reloj.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
/* Padding individual */
.caja {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

/* Forma abreviada: top right bottom left */
.caja {
  padding: 10px 20px 10px 20px;
}
Diagrama explicando shorthand de padding
El shorthand reduce código y mejora la legibilidad.
10

Border: El Límite de la Caja

El borde delimita visualmente una caja y se ubica entre el padding y el margen.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<div class="caja">
  Contenido con borde
</div>

<!-- El borde rodea al padding y al contenido -->
Ejemplos de distintos estilos de borde en CSS
El borde necesita grosor, estilo y color para ser visible.
11

Sintaxis de Border en CSS

CSS permite definir bordes generales o específicos por lado usando propiedades individuales.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
/* Borde completo */
div {
  border: 2px solid black;
}

/* Solo borde inferior */
h2 {
  border-bottom: 3px solid blue;
}
Ejemplo de borde general y borde inferior
El shorthand border aplica a los cuatro lados.
12

Margin: Separación Entre Elementos

El margen crea espacio **externo** entre cajas y controla la separación visual entre elementos.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<section>
  <article>Tarjeta 1</article>
  <article>Tarjeta 2</article>
</section>

<!-- El margin separa los artículos -->
Separación entre cajas usando margin
El margin nunca tiene color de fondo.
13

Centrado Horizontal con Margin Auto

Asignar `margin: 0 auto` es la técnica clásica para centrar elementos de bloque horizontalmente.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
.contenedor {
  width: 80%;
  margin: 0 auto;
  /* El navegador reparte el espacio lateral */
}
Bloque centrado horizontalmente con margin auto
Funciona solo si el elemento tiene width definido.
14

Cálculo del Ancho Total en el Box Model

En el modelo estándar, el ancho visible se calcula sumando contenido, padding y borde.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<div class="caja">
  Caja con padding
</div>

<!-- El ancho real es mayor al width definido -->
Suma visual de width más padding y border
Este comportamiento puede romper grillas si no se controla.
Publicidad
htmlCssOnlineCourseResponsiveWebDesignFromScratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs
Ver próximas fechas
16

Box-Sizing: Border-Box

La propiedad `box-sizing: border-box` simplifica los cálculos incluyendo padding y borde dentro del width.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
/* Práctica recomendada */
* {
  box-sizing: border-box;
}

.caja {
  width: 300px;
  padding: 20px;
}
Comparación entre content-box y border-box
Con border-box el tamaño visible es exacto.
17

Colapso de Márgenes Verticales

Los márgenes verticales adyacentes no se suman: el navegador usa el valor mayor.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<p>Párrafo uno</p>
<p>Párrafo dos</p>

<!-- Sus márgenes se colapsan -->
Ejemplo visual del colapso de márgenes
Este comportamiento mantiene ritmo visual en textos.
18

Display Inline-Block

Inline-block combina lo mejor de los elementos de línea y de bloque.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
a {
  display: inline-block;
  width: 120px;
  padding: 10px;
  /* Se alinean en fila pero respetan tamaño */
}
Elementos alineados con display inline-block
Muy usado en botones y menús simples.
19

Inspeccionar el Box Model en el Navegador

Las herramientas de desarrollo permiten visualizar cada capa del box model en tiempo real.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
<!-- Click derecho → Inspeccionar -->
<!-- Pestaña Computed muestra el box model -->
Inspector del navegador mostrando box model
Es la mejor forma de depurar problemas de espacio.
20

Reset CSS y Valores por Defecto

Los navegadores aplican estilos propios. Un reset básico evita comportamientos inesperados.

Copiar con comentariosCopiado
Copiar sin comentariosCopiado
/* Reset base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
Representación visual de estilos por defecto eliminados
Partir de cero da control total del diseño.
Publicidad
htmlCssOnlineCourseResponsiveWebDesignFromScratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs
Ver próximas fechas

Leccion Anterior

Composición artística de letras y glifos de diferentes familias tipográficas
La elección tipográfica define el carácter y la legibilidad de tu interfaz web.

Tipografías: Más allá de Arial y Times

El diseño web moderno exige una identidad visual única. En este módulo aprenderás a romper las limitaciones de las fuentes preinstaladas en el sistema operativo, implementando tipografías externas mediante archivos locales y servicios en la nube.

Comenzar Lección

Leccion Actual

Diagrama del CSS Box Model mostrando content, padding, border y margin
El Box Model explica cómo el navegador mide, separa y renderiza cada elemento en pantalla.

CSS Box Model

El Box Model es la base real del diseño web en CSS. En este módulo aprenderás cómo el navegador interpreta cada elemento como una caja, cómo se calculan sus dimensiones, cómo influyen el padding, los bordes y los márgenes, y cómo evitar errores clásicos que rompen layouts y grillas.

Comenzar Lección

Lecciones Siguiente

Capas de elementos web mostrando flujo, superposición y posicionamiento en CSS
Dominar display y position es entender cómo el navegador piensa el layout.

CSS Display y Position

En este módulo aprendés a pensar el layout como lo hace el navegador. Entenderás la diferencia entre block, inline e inline-block, cuándo usar display para controlar el flujo y cómo posicionar elementos con relative, absolute, fixed y sticky sin romper la estructura. Cerramos con z-index y stacking context para resolver superposiciones complejas de forma profesional.

Comenzar Lección
¿Por qué mi imagen se sale del contenedor?Las imágenes son elementos de línea reemplazados y tienen dimensiones intrínsecas. Si la imagen es más ancha que su padre, se desbordará. Soluciónalo con `img { max-width: 100%; height: auto; }`.
¿El padding afecta al alto del elemento?Sí. Al igual que con el ancho, el padding vertical se suma a la altura definida (`height`), a menos que uses `box-sizing: border-box`.
¿Cómo puedo centrar verticalmente un contenido?Con el Box Model clásico es difícil (se usaba `line-height` igual al alto o tablas). Hoy en día, la forma correcta y fácil es usando Flexbox: `display: flex; align-items: center;` en el padre.
¿Puedo usar porcentajes en el margin?Sí, pero ojo: los porcentajes en márgenes verticales (`margin-top: 10%`) se calculan basándose en el **ANCHO** del elemento padre, no en el alto. Esto suele confundir a muchos desarrolladores.
¿Qué diferencia hay entre `visibility: hidden` y `display: none`?`display: none` elimina la caja del renderizado (no ocupa espacio). `visibility: hidden` hace la caja invisible, pero sigue ocupando su espacio físico en el layout.
¿Qué son los márgenes negativos y para qué sirven?A diferencia del padding, el margin acepta valores negativos (ej: `margin-top: -20px`). Esto permite 'jalar' el elemento hacia la dirección opuesta, superponiéndolo sobre otros elementos o sacándolo de su contenedor. Es útil para efectos creativos de desbordamiento.
¿Por qué aparece un espacio extra debajo de mis elementos `inline-block`?Es un comportamiento clásico. Al ser tratados como texto, el navegador renderiza el salto de línea (enter) en tu código HTML como un espacio en blanco. Solución: pon el `font-size: 0` en el padre o elimina los espacios en el HTML entre las etiquetas.
¿El `box-shadow` ocupa espacio en el modelo de caja?No. Las sombras son efectos visuales renderizados fuera del flujo del documento. No empujan a los elementos vecinos ni aumentan el tamaño de la caja calculada, por lo que pueden solaparse con otros contenidos sin afectar la maquetación.
¿Cuál es la diferencia entre `border` y `outline`?El `border` ocupa espacio físico y suma al tamaño de la caja. El `outline` no ocupa espacio (se dibuja por encima), no permite definir lados individuales (es todo o nada) y se usa comúnmente para accesibilidad (focus) o depuración.
¿Por qué `margin: auto` no centra verticalmente?En el flujo normal (bloque), el navegador calcula la altura basada en el contenido. Si la altura es 'auto' o indefinida, no hay espacio sobrante para distribuir arriba y abajo. `margin: auto` vertical solo funciona en contextos Flexbox o Grid, o con posición absoluta.
¿Cuándo debo usar Padding y cuándo Margin?Regla general: Si quieres mover el contenido hacia adentro y que el fondo del elemento se vea, usa **Padding**. Si quieres empujar elementos externos para separarlos de tu caja y que el espacio sea transparente, usa **Margin**.
¿Qué son las Propiedades Lógicas (`padding-inline`, `margin-block`)?Son la evolución moderna del modelo de caja. En lugar de usar `left/right` (físico), usas `inline-start/end` (lógico). Esto permite que tu sitio se adapte automáticamente si el idioma se lee de derecha a izquierda (RTL) sin cambiar el CSS.
¿El colapso de márgenes ocurre también con los hijos?Sí. Si un elemento padre no tiene borde ni padding, el margen superior de su primer hijo se 'escapará' y empujará al padre entero hacia abajo, en lugar de separar al hijo del padre. Se soluciona añadiendo un `padding` mínimo o `overflow: hidden` al padre.
¿Qué pasa si uso `width: 100%` con padding en `content-box`?Crearás un desbordamiento horizontal (scroll lateral). Si el ancho es 100% y añades 20px de padding, el ancho total será 100% + 40px. Por esto `box-sizing: border-box` es casi obligatorio en diseño responsivo.
¿Cómo afecta `position: absolute` al modelo de caja?Saca el elemento del flujo normal del documento. La caja deja de ocupar espacio físico para sus hermanos (como si flotara). Sin embargo, su propio modelo de caja (padding, borde) sigue aplicando visualmente.
¿Por qué mis bordes redondeados (`border-radius`) cortan el contenido?Por defecto, no lo hacen. El contenido puede salirse de las esquinas redondeadas. Para que el contenido respete la curva y se recorte, debes aplicar explícitamente `overflow: hidden` al contenedor con bordes redondeados.
¿Existe un `margin` máximo o mínimo?No existen propiedades como `min-margin` o `max-margin`. Los márgenes son valores fijos o calculados. Si necesitas espaciado dinámico, se recomienda usar funciones modernas como `clamp()` o `min()`, ej: `margin: clamp(1rem, 5vw, 3rem)`.
¿El scrollbar (barra de desplazamiento) ocupa espacio dentro de la caja?Depende del sistema operativo. En Windows clásico, la barra ocupa unos 17px y resta espacio al contenido (Content Box). En macOS y móviles, suele ser flotante y no ocupa espacio. Esto puede causar ligeros saltos de diseño.
¿Para qué sirve `min-height`?Asegura que una caja tenga al menos cierta altura visual incluso si está vacía, pero permite que crezca si el contenido es mayor. Es mucho más seguro que usar `height` fijo, que provocaría desbordamiento si el texto crece.
¿Puedo poner imágenes en el borde?Sí, con la propiedad `border-image`. Te permite usar una imagen, cortarla en rodajas y usarla como marco del elemento, reemplazando el estilo de borde tradicional (solid, dotted, etc.).
¿Qué es el 'Reset CSS' o 'Normalize'?Es una hoja de estilos que se carga primero para unificar los valores del modelo de caja entre navegadores (Chrome, Firefox, Safari). Elimina márgenes por defecto del `body`, `h1`, `ul`, garantizando que tu diseño empiece desde una base limpia.
¿Cómo puedo hacer cálculos matemáticos con medidas mixtas?Usa la función `calc()`. Es muy potente para el modelo de caja. Ejemplo: `width: calc(100% - 50px)`. El navegador realiza la resta en tiempo real, mezclando porcentajes y píxeles.
¿El `background-color` cubre el margen?No. El fondo se pinta en el Contenido, el Padding y el Borde (si es transparente o punteado), pero se detiene estrictamente antes del Margen. El margen siempre es transparente.
¿Qué diferencia hay entre `max-width` y `width`?`width` es rígido. `max-width` es fluido: permite que la caja se encoja si la pantalla es más pequeña que el valor definido, pero nunca crecerá más allá de ese límite. Es esencial para diseños móviles.
¿Por qué un `div` vacío tiene altura 0 pero ancho 100%?Porque los elementos de bloque (`div`) se expanden horizontalmente para llenar su contenedor, pero verticalmente colapsan si no tienen contenido ni altura definida (`height` o `padding`).
¿Qué ocurre si uso `overflow: scroll` pero no hay desbordamiento?El navegador mostrará las barras de desplazamiento (scrollbars) igualmente, pero deshabilitadas (grises). Esto es útil para evitar que el diseño 'salte' cuando aparece o desaparece contenido dinámico.
¿El atributo `box-sizing` se hereda?No por defecto. Por eso la mejor práctica es usar el selector universal `* { box-sizing: border-box; }` o configurarlo para que herede `html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }`.
¿Cómo controlo el desbordamiento solo horizontalmente?Usando las propiedades específicas `overflow-x` (horizontal) y `overflow-y` (vertical). Por ejemplo: `overflow-x: auto; overflow-y: hidden;` es común para carruseles de imágenes.
¿Qué es el `background-clip`?Controla hasta dónde se pinta el fondo dentro del modelo de caja. `border-box` (pinta hasta el borde), `padding-box` (pinta hasta el padding, dejando el borde limpio) o `content-box` (pinta solo detrás del contenido).
¿Las tablas siguen el mismo modelo de caja?No exactamente. Las tablas tienen sus propias reglas de renderizado complejas. Aunque propiedades como padding y border aplican a las celdas (`td`), los márgenes no funcionan en las filas (`tr`) o celdas.

Información de cursos

Completá el formulario y recibí detalles sobre contenidos, fechas, niveles y promociones disponibles.

Completá el formulario para mantenerte informado. 👉