Premiers agencements

Distinguez les éléments block des éléments inline et apprenez les techniques classiques pour centrer un élément.

10 min · 3 questions

Comment les boîtes se rangent-elles sur la page ? Tout dépend de leur mode d'affichage, contrôlé par la propriété display. Un élément block se comporte comme une brique : il occupe toute la largeur disponible et pousse l'élément suivant à la ligne. Les titres <h1>, les paragraphes <p> et les <div> (des boîtes génériques sans signification particulière) sont block par défaut. Un élément inline se comporte comme un mot dans une phrase : il ne prend que la place de son contenu et se pose à côté de ses voisins. Les liens <a> et les <span> (l'équivalent inline du <div>) sont inline par défaut.

<p>Un paragraphe : je prends toute la largeur.</p>
<p>Moi aussi, donc je passe à la ligne.</p>
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
<span>Un span, lui aussi sur la même ligne.</span>

La propriété display permet de changer ce comportement : display: block; sur un lien le fait occuper toute la largeur, display: inline; sur un <div> le fait couler dans le texte. Attention à une limite importante des éléments inline : les propriétés width et height (largeur et hauteur) sont ignorées sur eux. Pour dimensionner un élément, il doit être block.

a {
  display: block;
  width: 200px;
  background-color: lightblue;
}

Passons au centrage, la question que tout débutant se pose. Premier cas : centrer du texte à l'intérieur d'une boîte. La propriété text-align: center; s'applique au conteneur et centre son contenu inline (texte, liens, images). Second cas : centrer une boîte block entière, comme une carte au milieu de la page. La technique classique : donner une largeur à la boîte, puis écrire margin: 0 auto;. La valeur auto demande au navigateur de calculer lui-même les marges gauche et droite : il les rend égales, ce qui centre la boîte.

.card {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid gray;
  padding: 16px;
}

Récapitulons vos acquis du module : vous savez brancher un fichier CSS, écrire des règles avec sélecteurs, propriétés et valeurs, cibler des éléments par balise, classe ou id, doser padding, border et margin, mettre en forme le texte et, désormais, agencer et centrer des boîtes. Avec ces fondations, vous pouvez déjà construire une page web simple et soignée. Le module suivant vous fera découvrir des outils d'agencement plus puissants.

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Quelle est la différence entre un élément block et un élément inline ?
   • Un block ne peut pas contenir de texte, un inline si
   • Un block occupe toute la largeur et va à la ligne, un inline reste dans le flux du texte
   • Un inline est toujours plus grand qu'un block
2. Comment centrer horizontalement une boîte block de 300 px de large ?
   • text-align: center; sur la boîte elle-même
   • margin: 0 auto; avec une largeur définie
   • padding: auto; sur la boîte
3. Pourquoi width: 200px; n'a-t-il aucun effet sur un <span> par défaut ?
   • Parce que les span refusent toute propriété CSS
   • Parce que 200 px dépasse la taille maximale d'un span
   • Parce qu'un span est inline et que width est ignorée sur les éléments inline