Support de cours - Lita

toute la largeur de la ligne. De même lorsqu’il rencontre un paragraphe. On dit que ce
sont des éléments de type bloc (block).
Mais à l’intérieur du premier paragraphe, l’élément strong se trouve lui, côte à côte
avec le reste du texte. Il en est de même pour l’élément img 2 . On dit que ce sont des
éléments de type en-ligne (inline).
Flux normal Le flux normal consiste à positionner les éléments dans leur ordre d’apparition
dans le code Html de la façon suivante :
– si l’élément est de type bloc, alors on l’affiche sur une nouvelle ligne qu’il occupe
seul ;
– s’il est de type en-ligne, on l’affiche sur la ligne en cours s’il reste de la place, sinon
on en commence une nouvelle sur laquelle on le place au début.
Modification du type d’un élément Il est possible en Css de modifier la façon
dont doit être traité un élément, c’est-à-dire d’indiquer qu’un élément est de type bloc
alors qu’il est par défaut de type en-ligne et vice versa.
Par exemple pour une image, il est fréquent de la redéfinir de type bloc :
img {
}
display: block;
2 Modèle de boîte (box model)
Conservons l’exemple précédent, et rendons visible la bordure de tous les éléments :
* {
border: 5px solid red;
}
Chaque élément possède une bordure, et on constate bien que le titre occupe toute la
largeur de sa ligne. Il y a donc un espacement entre la dernière lettre du titre et le bout
de la ligne. Par contre pour les éléments en-ligne, cet espacement semble nul.
2. Qui d’ailleurs impose sa hauteur à la ligne sur laquelle il se trouve.
30