CSS Box Model

<!-- 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 de bloque */
div {
  display: block;
  /* Ocupan todo el ancho disponible */
}

/* Elementos de línea */
span {
  display: inline;
  /* Solo ocupan el ancho de su contenido */
}

<!-- Contenido principal -->
<div>
  Texto o imagen
</div>

<!-- El contenido se rodea de padding, borde y margen -->

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

/* No existen valores negativos */

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

<!-- El texto puede salirse si la caja es pequeña -->

/* Oculta el contenido excedente */
.caja {
  overflow: hidden;
}

/* Scroll automático solo si es necesario */
.panel {
  overflow-y: auto;
}

<button>
  Botón sin padding
</button>

<!-- El padding separa el texto del borde -->

/* 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;
}

<div class="caja">
  Contenido con borde
</div>

<!-- El borde rodea al padding y al contenido -->

/* Borde completo */
div {
  border: 2px solid black;
}

/* Solo borde inferior */
h2 {
  border-bottom: 3px solid blue;
}

<section>
  <article>Tarjeta 1</article>
  <article>Tarjeta 2</article>
</section>

<!-- El margin separa los artículos -->

.contenedor {
  width: 80%;
  margin: 0 auto;
  /* El navegador reparte el espacio lateral */
}

<div class="caja">
  Caja con padding
</div>

<!-- El ancho real es mayor al width definido -->

/* Práctica recomendada */
* {
  box-sizing: border-box;
}

.caja {
  width: 300px;
  padding: 20px;
}

<p>Párrafo uno</p>
<p>Párrafo dos</p>

<!-- Sus márgenes se colapsan -->

a {
  display: inline-block;
  width: 120px;
  padding: 10px;
  /* Se alinean en fila pero respetan tamaño */
}

<!-- Click derecho → Inspeccionar -->
<!-- Pestaña Computed muestra el box model -->

/* Reset base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}