Tipos de caja en línea y en bloque

Cada etiqueta HTML tiene un tipo de representación visual en un navegador, lo que habitualmente se suele denominar el tipo de caja. En principio, se parte de dos tipos básicos: inline y block.

• inline Elemento en línea El elemento se coloca en horizontal (un elemento a continuación del otro). <span>
• block Elemento en bloque El elemento se coloca en vertical (un elemento encima de otro). <div>

Obsérvese que por defecto, todos los elementos <div> son elementos de bloque (block) y todos los elementos <span> son elementos en línea (inline). Para entender esto facilmente, vamos a crear un HTML con 3 etiquetas <div> como las siguientes:

<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>

A estas etiquetas HTML le vamos a aplicar el siguiente código CSS:

div {
  background: blue;
  color: white;
  margin: 1px;
}

Con esto observaremos que en nuestro navegador nos aparecen 3 cajas azules colocadas en vertical (una debajo de otra) que cubren todo el ancho disponible de la página. Esto ocurre porque la etiqueta <div> es un elemento en bloque, o lo que es lo mismo, que tiene un tipo de representación block por defecto. Cada etiqueta HTML tiene un tipo de representación concreta.

Sin embargo, este comportamiento de elementos puede cambiarse con la propiedad CSS display. Tan sencillo como añadir display: inline en el ejemplo anterior y veremos como pasan a ser 3 cajas azules colocadas en horizontal (una al lado de la otra) que cubren sólo el ancho del contenido de cada una. Ahora los <div> de esa página son elementos en línea (el tipo de representación visual que tienen los <span>).

Ya veremos en maquetación este tema más en profundidad