Índice

Visualización de las cajas

1. Propiedades CSS

La principal propiedad CSS de visualización de las cajas es display. Esta propiedad está disponible en la versión CSS 2.1 (http://www.w3.org/TR/CSS2/visuren.html#propdef-display).

He aquí los valores que pueden utilizarse: inline, block, list-item, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit.

Esta propiedad display se aborda en un módulo dedicado a las CSS3, el módulo CSS Display Module Level 3 que está en estado Working Draft a 15 de octubre de 2015.

2. Visualización en bloque y en línea

El uso de la propiedad display permite cambiar el comportamiento "normal" de las cajas, con el objetivo de facilitar la maquetación.

Un ejemplo clásico es la creación de una barra de navegación mediante una lista <ul>, donde cada enlace está situado en un elemento <li>. Por defecto, los elementos <li> se muestran en bloque, es decir, uno a continuación del otro. Modificando este comportamiento, puede ubicar los elementos uno al lado del otro para construir una barra de navegación.

He aquí el código HTML sin maquetación CSS:

<!DOCTYPE html>  
<html lang="es">  
<head>  
     <title>Una barra de navegación</title>  
     <meta charset="UTF-8" ...