Block et Inline
Chaque élément HTML a un niveau d’affichage qui lui est attribué par défaut. Ces niveaux influencent l’affichage des éléments par le navigateur et sont très importants lorsque le développeur commence à faire le design d’un site web.
Block-level
Les éléments dits block level, comme leur nom l’indique, sont affichés comme des blocs par le navigateur. Cela signifie que chaque élément de type block s’affiche l’un en dessous de l’autre, prenant toute la largeur disponible - à moins qu’une largeur spécifique soit définie, grâce à l’attribut style.
Voici une liste non exhaustive des éléments nativement traités comme des blocks par les navigateurs :
<div><h1>à<h6><form><header><footer><section>
Exemple :
<body>
<!-- Definit un block -->
<div>Hello World</div>
</body>
Inline
Les éléments de type inline continuent sur la ligne en cours et ne prennent que la largeur nécessaire à leur affichage.
Ci-dessous, une liste non exhaustive des éléments inline en HTML :
<span><a><img>
Exemple :
<body>
<!-- Hello World ne commence pas sur une nouvelle ligne, car <span> étant un élément inline, il continue sur la ligne en cours -->
<p>Je suis un paragraphe alors je vous dis <span> Hello World</span></p>
</body>
L'élément <div>
Besoin d'aide ?
Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !
