Dernière mise à jour le 28 novembre 2022
Chaque élément HTML a une manière par défaut de s'afficher.
La plupart du temps, il s'agit d'un affichage de type block ou de type inline.
Un élément de type block commence toujours sur une nouvelle ligne et prend toute la place disponible à l'horizontale.
Parmi les éléments de type block les plus utilisé on retrouve les titres (h1 à h6), les paragraphes (p), les tableaux (table) et l'élément div.
Voyez dans l'exemple qui suit comment chaque élément commence au début d'une nouvele ligne et prend toute la largeur disponible (visible avec le paragraphe jaune).
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les éléments de type "block"</title> </head> <body> <h3>Un titre</h3><h3>un autre titre</h3> <p>Un paragraphe</p><p>Un autre paragraphe</p> <p style="background-color:yellow">Un paragraphe jaune</p> <div>Un div</div><div>Un autre div</div> </body> </html>
L'élément div est le plus connu des éléments de type block.
|
address article aside blockquote canvas dd div |
dl dt fieldset figcaption figure footer form |
h1 h2 h3 h4 h5 h6 header |
hr li main nav noscript ol output |
p pre section table tfoot ul video |
Un élément de type inline ne commence pas nécessairement sur une nouvelle ligne et ne prend pas nécessairement toute la place disponible à l'horizontale.
Parmi les éléments de type inline les plus utilisé on retrouve les hyperliens (a), le texte mis en évidence (em, strong), les images (img) et l'élément span.
Voyez dans l'exemple suivant comment chaque élément est disposé sur une même ligne à la suite du précédent et cela même si ils sont écrits sur des lignes différentes dans le fichier HTML.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Les éléments de type "inline"</title>
</head>
<body>
<a href="">Un hyperlien</a>
<em>Un texte mis en évidence</em>
<strong>Un texte fortement mis en évidence</strong>
<span>Un élément span</span>
</body>
</html>
L'élément span est le plus connu des éléments de type inline.
|
a abbr acronym b bdo big br |
button cite code dfn em i img |
input kbd label map object q samp |
script select small span strong sub sup |
textarea time tt var |
Il existe un troisième type d'affichage qui est un mélange des deux précédents : inline-block.
Comparativement à ce qui se passe avec l'affichage block, l'affichage inline-block n'ajoute pas de saut de ligne avant et après l'élément.
Et comparativement à l'affichage inline, l'affichage inline-block permet de donner une largeur (width) et une hauteur (height). De plus, il assure le respect des marges et du remplissage haut et bas, ce qui n'est pas toujours le cas avec inline.
L'exemple suivant montre comment des éléments div sont affichés en inline, en inline-block et en block (affichage par défaut pour un div).
<style>
div.rouge {
display: inline;
border-color: red;
}
div.vert {
display: inline-block;
border-color: green;
}
div {
/* display: block; par défaut */
width: 60px;
height: 60px;
margin: 5px;
padding: 5px;
border: solid blue 2px;
text-align: center;
}
</style>
</head>
<body>
<div class="rouge">inline</div><div class="rouge">inline</div>
<div class="vert">inline-block</div><div class="vert">inline-block</div>
<div>normal (block)</div><div>normal (block)</div>
Sortie :
