CSS: El box model (o modelo de caja): TIPOS DE CAJA

Como se ha comentado anteriormente, todos los elementos de una web (párrafos, enlaces, imágenes, tablas, etc.) son cajas rectangulares. Los navegadores sitúan estas cajas de la forma en que el diseñador le haya indicado para maquetar la página.

Existen dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetación. Es decir, aparecen solos, insertando “saltos de línea”. Los elementos inline siguen el flujo y están contenidos dentro de elementos de bloque.

Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea.

Por su parte, los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos.

Por ejemplo, un párrafo sería un elemento block (no podemos tener un párrafo al lado del otro, sino que dos párrafos seguidos aparecerán uno abajo del otro. En cambio, un enlace es un elemento inline, ya que no “corta” el texto donde está metido.

Estas dos diferencias son importantes, pero hay que tener en mente que ambos tipos comparten el modelo de caja, que es el que aparece en la figura:

Elementos inline o elementos en línea

Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, b, strong, sub, sup, textarea, tt, u, var.

Elementos de bloque

Los elementos de bloque definidos por HTML son: address, blockquote, center, frameste, dir, div, dl, dd, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, li, tbody, td, tfoot, th, thead, tr.


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO