49
Vue d’ensemble du modèle de formatage visuel
par.Firefox 3.0.et.ses.versions.ultérieures..Internet.Explorer 8.et.les.dernières.versions.de.
Safari.et.Opera.la.reconnaissent.aussi..Le.mode.inline-block.a.donc.toutes.les.chances.
d’être.souvent.utilisé.à.l’avenir..
Figure 3.9
Éléments incorporés
à l’intérieur d’une boîte
de ligne.
Phasellus
nonummy
condimentum
augue
Hauteur de ligne
Boîte de ligne
Marge
Remplissage
Élément incorporé anonyme
Élément strong
Comme.les.éléments.HTML.qui.peuvent.être.imbriqués,.les.boîtes.peuvent.contenir.d’autres.
boîtes..La.plupart.sont.formées.à.partir.d’éléments.explicitement.définis,.mais.il.existe.
un.cas.où.un.élément.de.niveau.bloc.est.créé.même.s’il.n’a.pas.été.explicitement.défini :.
lorsque. vous. ajoutez. du. texte. au. début. d’un. élément. de. niveau. bloc,. comme. une. div..
Même. si. vous. n’avez. pas. défini. le. texte. comme. un. élément. de. niveau. bloc,. il. est. traité.
comme.tel :
Du texte
Dans.ce.cas,.la.boîte.est.appelée.une.boîte.de.bloc.anonyme,.car.elle.n’est.associée.à.aucun.
élément.explicitement.défini.
Un. phénomène. similaire. se. produit. avec. les. lignes. de. texte. à. l’intérieur. des. éléments. de.
niveau.bloc..Imaginez.qu’un.paragraphe.contienne.trois.lignes.de.texte..Chacune.forme.une.
boîte.de.ligne.anonyme..Vous.ne.pouvez.pas.créer.de.bloc.anonyme.de.style.ou.des.boîtes.
de.ligne.directement,.sauf.en.utilisant.le.pseudo-élément.:first-line,.dont.l’usage.est.bien.
évidemment.limité..Toutefois,.il.est.utile.de.comprendre.que.tout.ce.que.vous.voyez.à.l’écran.
crée.une.boîte.d’une.forme.ou.d’une.autre..
Positionnement relatif
Le. positionnement. relatif. est. assez. simple. à. comprendre.. Un. élément. positionné. ainsi.
conserve. exactement. son. emplacement. dans. le. flux..Vous. pouvez. ensuite. le. déplacer. par.
rapport.à.son.point.d’origine.en.définissant.une.position.verticale.ou.horizontale..Si.vous.
fixez.la.position.du.haut.à.20 pixels,.la.boîte.apparaît.20 pixels.au-dessous.de.sa.position.
normale..Si.vous.fixez.la.position.gauche.à.20 pixels,.vous.créez.un.espace.de.20 pixels.à.
gauche.de.l’élément.et.déplacez.ce.dernier.vers.la.droite.(voir.Figure 3.10).
Vue d’ensemble du modèle de formatage visuel
par.Firefox 3.0.et.ses.versions.ultérieures..Internet.Explorer 8.et.les.dernières.versions.de.
Safari.et.Opera.la.reconnaissent.aussi..Le.mode.inline-block.a.donc.toutes.les.chances.
d’être.souvent.utilisé.à.l’avenir..
Figure 3.9
Éléments incorporés
à l’intérieur d’une boîte
de ligne.
Phasellus
nonummy
condimentum
augue
Hauteur de ligne
Boîte de ligne
Marge
Remplissage
Élément incorporé anonyme
Élément strong
Comme.les.éléments.HTML.qui.peuvent.être.imbriqués,.les.boîtes.peuvent.contenir.d’autres.
boîtes..La.plupart.sont.formées.à.partir.d’éléments.explicitement.définis,.mais.il.existe.
un.cas.où.un.élément.de.niveau.bloc.est.créé.même.s’il.n’a.pas.été.explicitement.défini :.
lorsque. vous. ajoutez. du. texte. au. début. d’un. élément. de. niveau. bloc,. comme. une. div..
Même. si. vous. n’avez. pas. défini. le. texte. comme. un. élément. de. niveau. bloc,. il. est. traité.
comme.tel :
Du texte
Encore du texte
Dans.ce.cas,.la.boîte.est.appelée.une.boîte.de.bloc.anonyme,.car.elle.n’est.associée.à.aucun.
élément.explicitement.défini.
Un. phénomène. similaire. se. produit. avec. les. lignes. de. texte. à. l’intérieur. des. éléments. de.
niveau.bloc..Imaginez.qu’un.paragraphe.contienne.trois.lignes.de.texte..Chacune.forme.une.
boîte.de.ligne.anonyme..Vous.ne.pouvez.pas.créer.de.bloc.anonyme.de.style.ou.des.boîtes.
de.ligne.directement,.sauf.en.utilisant.le.pseudo-élément.:first-line,.dont.l’usage.est.bien.
évidemment.limité..Toutefois,.il.est.utile.de.comprendre.que.tout.ce.que.vous.voyez.à.l’écran.
crée.une.boîte.d’une.forme.ou.d’une.autre..
Positionnement relatif
Le. positionnement. relatif. est. assez. simple. à. comprendre.. Un. élément. positionné. ainsi.
conserve. exactement. son. emplacement. dans. le. flux..Vous. pouvez. ensuite. le. déplacer. par.
rapport.à.son.point.d’origine.en.définissant.une.position.verticale.ou.horizontale..Si.vous.
fixez.la.position.du.haut.à.20 pixels,.la.boîte.apparaît.20 pixels.au-dessous.de.sa.position.
normale..Si.vous.fixez.la.position.gauche.à.20 pixels,.vous.créez.un.espace.de.20 pixels.à.
gauche.de.l’élément.et.déplacez.ce.dernier.vers.la.droite.(voir.Figure 3.10).