Secció 4: Posicionament CSS

2. Tipus de caixes

2.2. display

La propietat display permet assignar el tipus de caixa que genera l'element seleccionat. Els valors possibles són bloc, inline (valor per defecte), list-item, marker, none, run-in i compact.

Com pots observar hi ha un bon nombre de tipus de caixa, però ja hem dit que el comportament de totes elles és o bé el de les caixes de bloc, o el de les caixes inline. De fet encara n'hi ha deu més (!) que corresponen a caixes generades pels elements de les taules.

Però fins i tot limitant-nos als valors block i inline, per a què s'utilitza la propietat display? El cert és que en la majoria de situacions no la necessitaràs en absolut. Això és totalment llògic: cada element HTML ja té un valor predeterminat per display (assignat per l'style sheet per defecte del navegador), i en principi sembla poc útil canviar-lo. Per definició, un paràgraf s'ha de comportar com a element de bloc, si no no seria un paràgraf! Però en alguns casos ens pot interessar modificar el comportament per defecte de determinats elements. Potser el millor sigui veure'n algun exemple.

Exemple 1: display i links

a.menu {
display: block;
border: 3px solid #555;
margin: 5px;
}

Segons el CSS anterior, el següent fragment HTML

generarà un resultat com aquest:

Com pots comprovar, els links han agafat les característiques dels elements de bloc: ocupen tot l'espai horitzontal disponible (i tot el rectangle és link, no només el text), i es situen un a sota de l'altre.

Fixat que no té res a veure amb el que es veuria si haguéssim mantingut la propietat display predeterminada: