Séparer le fond et la forme avec HTML et CSS
CHAPITRE 2
© Groupe Eyrolles, 2005
27
Les éléments en ligne
Le contenu des éléments en ligne est affiché au fil du texte. Par exemple : des portions de phrases mises en exergue dans un paragraphe, des liens hypertexte, etc. On
les appelle encore « éléments internes » car ils visent à donner du sens à des portions
du document tout en restant au fil du texte, c’est-à-dire sans créer de nouveaux blocs.
C’est par exemple le cas des éléments de renforcement (représentés en gras par les
navigateurs graphiques), et d’emphase (italique).
Ces éléments, conçus pour demeurer au sein du texte afin de l’enrichir et de lui
apporter du sens, ne sont pas vraiment prévus pour un positionnement précis dans le
document (même si cela est possible). À l’exception des éléments remplacés, déjà
mentionnés, leurs dimensions seront déterminées par leur contexte.
Par défaut, et contrairement aux éléments de type bloc, les éléments en ligne ont des
marges internes et externes d’épaisseur nulle, donc inexistantes.
Les éléments de type bloc
Il s’agit de ceux dont le rendu visuel forme un bloc. C’est par exemple le cas des paragraphes.
Cette structure leur permet de prévoir des dimensions (hauteur, largeur, profondeur),
de contenir d’autres éléments dimensionnés, et de posséder des marges internes
(padding). Leur propriété la plus importante est la possibilité de les placer (ou positionner) en les sortant du flux du document, contribuant ainsi à sa mise en page.
Ces caractéristiques leur sont pour la plupart réservées. Ainsi, une balise en ligne
comme ne pourra posséder de dimensions propres, celles-ci dépendant du contenu (texte ou image) de son élément.
Il est facile de passer d’une structure bloc à une structure en ligne (et inversement)
grâce à la propriété CSS display. Nous verrons également comment positionner les
différents éléments selon leur type.
PERTURBANT Marges par défaut
À l’exception de la balise neutre
CHAPITRE 2
© Groupe Eyrolles, 2005
27
Les éléments en ligne
Le contenu des éléments en ligne est affiché au fil du texte. Par exemple : des portions de phrases mises en exergue dans un paragraphe, des liens hypertexte, etc. On
les appelle encore « éléments internes » car ils visent à donner du sens à des portions
du document tout en restant au fil du texte, c’est-à-dire sans créer de nouveaux blocs.
C’est par exemple le cas des éléments de renforcement (représentés en gras par les
navigateurs graphiques), et d’emphase (italique).
Ces éléments, conçus pour demeurer au sein du texte afin de l’enrichir et de lui
apporter du sens, ne sont pas vraiment prévus pour un positionnement précis dans le
document (même si cela est possible). À l’exception des éléments remplacés, déjà
mentionnés, leurs dimensions seront déterminées par leur contexte.
Par défaut, et contrairement aux éléments de type bloc, les éléments en ligne ont des
marges internes et externes d’épaisseur nulle, donc inexistantes.
Les éléments de type bloc
Il s’agit de ceux dont le rendu visuel forme un bloc. C’est par exemple le cas des paragraphes.
Cette structure leur permet de prévoir des dimensions (hauteur, largeur, profondeur),
de contenir d’autres éléments dimensionnés, et de posséder des marges internes
(padding). Leur propriété la plus importante est la possibilité de les placer (ou positionner) en les sortant du flux du document, contribuant ainsi à sa mise en page.
Ces caractéristiques leur sont pour la plupart réservées. Ainsi, une balise en ligne
comme ne pourra posséder de dimensions propres, celles-ci dépendant du contenu (texte ou image) de son élément.
Il est facile de passer d’une structure bloc à une structure en ligne (et inversement)
grâce à la propriété CSS display. Nous verrons également comment positionner les
différents éléments selon leur type.
PERTURBANT Marges par défaut
À l’exception de la balise neutre
, tous les éléments de type bloc possèdent par défaut des marges internes (padding) et externes (margin) non nulles. Vous constaterez toute leur importance en
observant que les différents navigateurs leur donnent des valeurs différentes. C’est pourquoi il faut parfois les annuler ou les expliciter pour éviter de grosses différences de rendu visuel.
observant que les différents navigateurs leur donnent des valeurs différentes. C’est pourquoi il faut parfois les annuler ou les expliciter pour éviter de grosses différences de rendu visuel.