Primeras maquetaciones

Distingue los elementos de bloque de los elementos en línea y aprende las técnicas clásicas para centrar un elemento.

10 min · 3 preguntas

¿Cómo se organizan las cajas en la página? Todo depende de su modo de visualización, controlado por la propiedad display. Un elemento de bloque se comporta como un ladrillo: ocupa todo el ancho disponible y empuja al elemento siguiente a una nueva línea. Los títulos <h1>, los párrafos <p> y las etiquetas <div> (cajas genéricas sin un significado particular) son de bloque por defecto. Un elemento en línea se comporta como una palabra en una frase: solo ocupa el espacio de su contenido y se coloca junto a sus vecinos. Los enlaces <a> y las etiquetas <span> (la contrapartida en línea de <div>) son en línea por defecto.

<p>A paragraph: I take up the full width.</p>
<p>Me too, so I start on a new line.</p>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<span>A span, also on the same line.</span>

La propiedad display te permite cambiar este comportamiento: display: block; en un enlace hace que ocupe todo el ancho, display: inline; en un <div> hace que fluya dentro del texto. Cuidado con una limitación importante de los elementos en línea: las propiedades width y height se ignoran en ellos. Para dimensionar un elemento, debe ser de bloque.

a {
  display: block;
  width: 200px;
  background-color: lightblue;
}

Pasemos al centrado, la pregunta que todo principiante se hace. Primer caso: centrar el texto dentro de una caja. La propiedad text-align: center; se aplica al contenedor y centra su contenido en línea (texto, enlaces, imágenes). Segundo caso: centrar una caja de bloque entera, como una tarjeta en medio de la página. La técnica clásica: dale un ancho a la caja y luego escribe margin: 0 auto;. El valor auto le pide al navegador que calcule él mismo los márgenes izquierdo y derecho: los hace iguales, lo que centra la caja.

.card {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid gray;
  padding: 16px;
}

Recapitulemos lo que has aprendido en este módulo: sabes cómo enlazar un archivo CSS, escribir reglas con selectores, propiedades y valores, apuntar a elementos por etiqueta, clase o id, equilibrar el relleno, el borde y el margen, dar estilo al texto y, ahora, disponer y centrar cajas. Con estos fundamentos, ya puedes construir una página web sencilla y cuidada. El próximo módulo te presentará herramientas de maquetación más potentes.

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Cuál es la diferencia entre un elemento de bloque y un elemento en línea?
   • Un bloque no puede contener texto, un elemento en línea sí
   • Un bloque ocupa todo el ancho y empieza una nueva línea, un elemento en línea se queda en el flujo del texto
   • Un elemento en línea es siempre más grande que un bloque
2. ¿Cómo centras horizontalmente una caja de bloque que mide 300 px de ancho?
   • text-align: center; en la propia caja
   • margin: 0 auto; con un ancho definido
   • padding: auto; en la caja
3. ¿Por qué width: 200px; no tiene efecto sobre un <span> por defecto?
   • Porque los span rechazan todas las propiedades CSS
   • Porque 200 px supera el tamaño máximo de un span
   • Porque un span es en línea y width se ignora en los elementos en línea