Aller au contenu

Aide CSS : L'attribut display

1. Qu'est-ce que display ?

L’attribut display en CSS définit la manière dont un élément est affiché dans la page.

Il contrôle le type de boîte générée et la façon dont les éléments s’organisent entre eux.

2. Valeurs principales

2.1 block

  • L’élément occupe toute la largeur disponible.
  • Il commence toujours sur une nouvelle ligne.
  • Exemples d’éléments par défaut : <div>, <p>, <h1> à <h6>.
div {
  display: block;
}

➡️ Utilisation : créer des sections ou des blocs distincts.

2.2 inline

  • L’élément occupe seulement la place de son contenu.
  • Il ne force pas de retour à la ligne.
  • Exemples d’éléments par défaut : <span>, <a>, <img>.
span {
  display: inline;
}

➡️ Utilisation : styliser une portion de texte sans casser la ligne.

2.3 inline-block

  • Similaire à inline, mais on peut appliquer des marges, paddings et dimensions (width/height).
  • Très utile pour aligner plusieurs éléments côte à côte.
img {
  display: inline-block;
  width: 30%;
}

➡️ Utilisation : images, boutons, petites boîtes côte à côte.

2.4 flex

  • Active le flexbox, un puissant système de mise en page.
  • Les éléments enfants deviennent des flex-items avec des règles de distribution automatiques.
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

➡️ Utilisation : créer des barres de navigation, grilles simples, alignements complexes.

3. Autres valeurs

Il existe plusieurs autres valeurs (grid, inline-flex, none, etc.) que nous verrons plus tard dans le cours.

4. Exemple de modification dy type par défaut

HTML

<div>Bloc entier</div>

<span>Texte en ligne</span>

<div id="monFlex">
  <p>Élément 1</p>
  <p>Élément 2</p>
</div>

CSS

div{      /*Modification d'une div block (par défaut) à inline-block de largeur différente*/
  display: inline-block; 
  width: 35%;
  border: 0.1rem solid black;
}

span{   /*Modification d'un span inline (par défaut) à inline-block pour y appliquer du padding*/
  display: inline-block; 
  padding: 1rem;
  color: red;
}

#monFlex{   /*Modification d'une div block (par défaut) à un flexbox pour la distribution de ses enfants*/
  display: flex; 
  justify-content: center;
}