La propietat display
En el mòdul 3 es diferencien dos tipus d'elements estructurals: els elements en bloc (com les capçaleres o els paràgrafs) i els elements en línia. La presentació dels elements com a bloc, en línia i, com a ítem d'una llista, pot ser modificada per mitjà de la propietat display. Amb aquest propietat es pot aconseguir que un element de bloc es comporti com a un element en línia, un element en línia com a un element de bloc o, com ja es va veure a la pràctica 6 del mòdul 4, on s'explicava com construir un menú horitzontal, pot aconseguir que els ítems d'una llista actuin com a elements en línia.
Recordeu que el navegador afegeix un "salt de línia" com a final de cada element de bloc que representa i com a principi del següent.
Obriu l'arxiu display.html. Podeu veure tres paràgrafs centrats. El navegador els representa com a blocs, donat que l'element <p> pertany a la família d'elements de bloc i, per tant, provoca un salt de línia per a cada paràgraf.
Afegint la propietat display:inline al selector .model_box_1, es modifica el seu comportament de bloc i se li assigna un comportament en línia:
.model_box_1 {
font-family: verdana;
font-size: 80%;
margin-bottom: 20px;
width: 350px;
padding: 5px;
display: inline;
}
Com els tres paràgrafs estan associats al mateix selector .model_box_1, els tres actuaran en línia. Veieu el resultat i comproveu que els tres blocs de text han passat a actuar com a elements en línia.
Al següent exemple s'ha fet a l'inrevés. S'ha indicat a l'element strong que actui com a bloc afegint la propietat: display: block;
strong {
border: 1px solid #333;
display: block;
width: 350px;
}
Per accentuar més la diferència, s'ha afegit una amplada i una vora. L'efecte no pot resultar més sorprenent.
A continuació, es veurà un exemple de com els paràgrafs es poden convertir en ítems d'una llista, modificant el valor inline de la propietat display, per list-item:
.model_box_1 {
font-family: verdana;
font-size: 80%;
margin-bottom: 20px;
width: 350px;
padding: 5px;
display: list-item;
}
Per últim, la propietat display pot tenir el valor none. Aquest valor elimina la presència de l'element dessignat. Proveu de fer desaparèixer l'element "strong" canviant el valor de display a none:
strong {
border: 1px solid #333;
display: none;
width: 350px;
}
A la pràctica següent es veurà el posicionament dels elements.
