Quelle est la différence entre les éléments block et inline ?

Question

Accepted Answer

Chaque élément a un comportement **display** par défaut qui contrôle son flux dans la mise en page. - Les éléments **block** commencent sur une **nouvelle ligne** et prennent la **largeur complète disponible**. Ils acceptent width/height et tous les margins/paddings. Exemples : `

`, `

`, `
`, `
`. - Les éléments inline s'écoulent au sein d'une ligne, seulement aussi larges que leur contenu, et ignorent width/height et les marges supérieures/inférieures. Exemples : ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Pourquoi c'est important ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Définir `width`/`height` sur un élément inline ne fait rien. La solution est de changer son display : ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — le meilleur des deux mondes `inline-block` s'inscrit dans le flux de texte (côte à côte) et* respecte width/height/margins — parfait pour les éléments de navigation, les badges ou les boutons disposés en ligne. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Pourquoi c'est important Comprendre le display par défaut explique pourquoi votre `` ne prendra pas de hauteur, pourquoi les `
` s'empilent, et quand basculer vers `inline-block`, `flex` ou `grid`. C'est le fondement de la façon dont les éléments s'organisent avant d'appliquer un système de mise en page.