retour
01/04
section 01

Display et le flux normal

Connectez-vous pour sauvegarder votre progression et acceder aux quiz
Se connecter

Chaque element HTML a une valeur display par defaut qui determine comment il se comporte dans le flux normal du document (l'ordre naturel dans lequel les elements apparaissent).

Elements block vs inline

css/* Elements block (par defaut) */
/* Occupent toute la largeur disponible, retour a la ligne avant et apres */
div, p, h1-h6, ul, ol, li, table, form, header, footer, main, section, article

/* Elements inline (par defaut) */
/* Occupent seulement la place de leur contenu, pas de retour a la ligne */
span, a, strong, em, img, input, button, code, label
ProprieteBlockInline
Largeur100% du parentLargeur du contenu
HauteurDefinie par le contenuDefinie par le contenu
Retour a la ligneAvant et apresAucun
width/heightFonctionneIgnore
margin verticalFonctionneIgnore
padding verticalFonctionne visuellement mais ne pousse pas les autres elements

Les valeurs de display

css.element {
  display: block;         /* Element block */
  display: inline;        /* Element inline */
  display: inline-block;  /* Inline mais accepte width/height/margin */
  display: none;          /* Masque completement (retire du flux) */
  display: flex;          /* Conteneur Flexbox */
  display: grid;          /* Conteneur Grid */
  display: contents;      /* L'element disparait, ses enfants remontent */
}

inline-block : le meilleur des deux mondes

css/* inline-block : se comporte comme inline mais accepte les dimensions */
.badge {
  display: inline-block;
  padding: 4px 12px;
  background: #8b5cf6;
  color: white;
  width: 100px;        /* Fonctionne (contrairement a inline) */
  margin: 5px;         /* Fonctionne dans toutes les directions */
}

visibility vs display: none vs opacity

css/* display: none — l'element est retire du flux (comme s'il n'existait pas) */
.hidden { display: none; }

/* visibility: hidden — l'element est invisible mais occupe toujours l'espace */
.invisible { visibility: hidden; }

/* opacity: 0 — l'element est transparent mais interactif (cliquable !) */
.transparent { opacity: 0; }
ProprieteVisibleOccupe l'espaceInteractif
display: noneNonNonNon
visibility: hiddenNonOuiNon
opacity: 0NonOuiOui

Overflow : gerer le depassement

css.container {
  width: 300px;
  height: 200px;

  overflow: visible;   /* Defaut : le contenu depasse */
  overflow: hidden;    /* Le contenu depassant est coupe */
  overflow: scroll;    /* Barres de defilement toujours visibles */
  overflow: auto;      /* Barres de defilement si necessaire */

  /* Axes independants */
  overflow-x: auto;    /* Defilement horizontal */
  overflow-y: hidden;  /* Pas de defilement vertical */
}
Piege courant : Un overflow: hidden sur un parent peut masquer un element enfant positionne en absolute qui depasse. Si un tooltip ou un dropdown est coupe, verifiez les overflow des parents.