Propriété Display : Block, Inline et Inline-Block

Les éléments HTML se comportent différemment selon qu'ils sont bloc, en ligne ou inline-block. Ces types d'affichage influencent la mise en page, l'espacement et les propriétés CSS utilisables.

Éléments de type bloc

• Commencent sur une nouvelle ligne ;
• Occupent toute la largeur de leur conteneur ;
• Prise en charge de la largeur, hauteur, marge, remplissage et bordure.

Exemples courants : <div>, <p>, <ul>, <li>, <h1>–<h6>.

Éléments en ligne

• Restent sur la même ligne ;
• Occupent uniquement l'espace nécessaire à leur contenu ;
• Largeur et hauteur non applicables (mais la bordure fonctionne).

Exemples courants : <a>, <span>, <img>, <input>.

Éléments en ligne-bloc

• Restent en ligne, comme le texte ;
• Prise en charge de la largeur, hauteur, marge, remplissage et bordure, comme les éléments en bloc.

Exemples : <button>, <select>, <textarea>.

Utiles lorsque des éléments doivent être placés côte à côte tout en permettant un contrôle total du style.

Différences clés