La propriété "Display" va vous permettre de définir le comportement d'affichage d'un élément. Les valeurs principales sont : "block", "inline" et "none". D'autres valeurs avancées seront vue plus loin dans le cours.
Les éléments avec "display: inline" sont disposés dans une ligne horizontalement, sans nouvelle ligne. Ils occupent uniquement l'espace nécessaire pour leur contenu et n'ont pas de largeur et de hauteur définies.
<a href="mapage.html">Ma page</a>
<a href="mapage2.html">Ma seconde page</a>
Les éléments avec "display: block" sont disposés en bloc, avec une nouvelle ligne avant et après. Ils occupent tout l'espace disponible sur la largeur de leur conteneur et peuvent avoir une largeur, une hauteur et des marges définies. Les éléments block peuvent contenir d'autres éléments et ont des propriétés de mise en forme telles que la largeur, la hauteur, les marges, etc.
<p>Mon paragraphe</p>
<p>Mon second paragraphe</p>
Le principe des éléments inline et blocks est en principe très important dans la réalisation d'un site. C'est en cumulant la propriété display et d'autres propriétés comme les largeurs, hauteurs, bordures, marges qu'elle prendra tout son sens. Dans un premier temps, retenez globalement qu'un élément inline pourra être suivi d'autres éléments inline dans la même ligne et que des éléments blocks prendront l'intégralité de la largeur disponible.
Les balises ont des comportement de "display" différents selon leur nature. Voici les balises les plus utilisées qui sont en "inline"
<a> (lien)<span> (espace en ligne)<strong> (texte en gras)<em> (texte en italique)<small> (petit texte)<cite> (citation)<img> (image)Pour les "block"
<div> (division)<p> (paragraphe)