Devenez Développeur

Dimensions et positionnement en CSS : le guide moderne

Par Sam Accolade · Publié le 6 janvier 2018 · Mis à jour le 3 août 2026

Cet article a été entièrement réécrit en 2026. La version d’origine datait de 2018 et présentait le code en captures d’écran, avec des techniques aujourd’hui dépassées comme le positionnement par floats. Vous trouverez ici les bases réellement utiles pour dimensionner et positionner vos blocs : width et height, box-sizing, display et la propriété position. Tous les exemples ont été exécutés et vérifiés dans Chrome 150 lors de la réécriture.

Petit pré-requis : ce cours suppose que vous connaissez la différence entre un élément de type bloc et un élément en ligne. Si ce n’est pas le cas, commencez par le cours sur les éléments inline et block.

Mettre en place les blocs d’exemple

Nous allons travailler avec un conteneur et deux blocs enfants. Voici le HTML : 

<div class="conteneur">
  <div class="bloc-a">divA</div>
  <div class="bloc-b">divB</div>
</div>

Et le CSS de départ, avec une couleur de fond pour visualiser chaque bloc : 

.conteneur { background: #f0f0f0; }
.bloc-a { background: #4a90d9; }
.bloc-b { background: #d94a4a; }

Si vous ouvrez cette page dans votre navigateur, rien ne s’affiche ou presque. C’est normal : un bloc vide, sans contenu ni hauteur définie, a une hauteur de 0 pixel (vous pouvez le mesurer dans l’inspecteur du navigateur). Pour le voir apparaître, il faut soit écrire du contenu dedans, soit lui donner des dimensions.

Les dimensions : width et height

Deux propriétés définissent la taille d’un bloc : width (largeur) et height (hauteur). Donnons une largeur au conteneur et une hauteur aux enfants : 

.conteneur { width: 500px; background: #f0f0f0; }
.bloc-a { height: 100px; background: #4a90d9; }
.bloc-b { height: 100px; background: #d94a4a; }

Résultat : les deux blocs enfants mesurent automatiquement 500 pixels de large, exactement comme leur parent. C’est le comportement par défaut : width et height valent auto, ce qui signifie pour un bloc « toute la largeur disponible du conteneur » et « juste la hauteur nécessaire au contenu ».

Évitez de figer des largeurs en pixels partout : sur mobile, un bloc de 500 px déborde de l’écran. Les propriétés max-width et min-width permettent de poser des limites plutôt que des tailles fixes ; nous y reviendrons dans un futur article sur le responsive design.

box-sizing : le réglage à faire avant tout

Question piège : si j’écris le code ci-dessous, quelle est la largeur totale affichée de la boîte ? 

.boite {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

Réponse contre-intuitive : 350 pixels. Par défaut (mode content-box), width ne définit que la largeur du contenu ; le navigateur ajoute ensuite le padding (2 fois 20 px) et les bordures (2 fois 5 px). J’ai vérifié la mesure dans l’inspecteur : la boîte rendue fait bien 350 px de large.

C’est pour cela que la quasi-totalité des sites modernes activent le mode border-box, où width devient la largeur totale, padding et bordures compris : 

* {
  box-sizing: border-box;
}

Avec cette règle en tête de votre fichier CSS, la même boîte mesure exactement 300 px. Si les notions de padding, bordure et marge sont floues, relisez le cours sur le modèle de boîte en CSS.

display : block, inline et inline-block

La propriété display change la nature d’affichage d’un élément. Ses valeurs historiques : block (l’élément prend toute la largeur et provoque un retour à la ligne), inline (l’élément se glisse dans le texte et ignore width et height) et inline-block, un hybride : l’élément accepte des dimensions mais reste sur la même ligne que ses voisins.

Pour placer nos deux blocs côte à côte :

.bloc-a, .bloc-b {
  display: inline-block;
  width: 150px;
  height: 100px;
}

Les deux blocs s’affichent sur la même ligne, séparés d’un petit espace de 4 pixels (mesuré dans Chrome 150 avec la taille de police par défaut). Cet espace n’est pas une marge : c’est l’espace blanc entre les deux balises dans le HTML, rendu comme une espace de texte. C’est l’une des raisons pour lesquelles inline-block n’est plus la méthode privilégiée pour aligner des blocs.

Car display a aussi deux valeurs modernes : flex et grid. Ce sont elles qui servent aujourd’hui à construire de vraies mises en page (colonnes, grilles, alignements). Chacune mérite un cours complet : les guides Flexbox et CSS Grid sont les prochains articles prévus sur ce site.

La propriété position

Par défaut, tous les éléments ont position: static : ils suivent le flux normal de la page. Quatre autres valeurs permettent d’en sortir.

relative : décaler un élément par rapport à sa place

.bloc-a {
  position: relative;
  top: 10px;
  left: 20px;
}

L’élément est décalé de 10 px vers le bas et de 20 px vers la droite par rapport à sa position d’origine. Détail important : l’espace qu’il occupait dans le flux est conservé, les autres éléments ne bougent pas. En pratique, relative sert surtout à autre chose : créer un point de référence pour un enfant en position absolue.

absolute : se placer par rapport à un ancêtre positionné

Idée reçue à corriger (l’ancienne version de cet article la véhiculait) : absolute ne positionne pas l’élément « par rapport à la page ». Un élément en position: absolute se place par rapport à son plus proche ancêtre lui-même positionné, c’est-à-dire dont la position n’est pas static. C’est seulement s’il n’en trouve aucun qu’il se cale sur la page.

D’où le duo classique : le parent en relative, l’enfant en absolute. Exemple d’une pastille placée en haut à droite d’une carte : 

.carte {
  position: relative;
}
.pastille {
  position: absolute;
  top: 10px;
  right: 10px;
}

J’ai testé ce montage avec une carte décalée de 100 px du bord de page : la pastille se place bien à 10 px du haut et du bord droit de la carte, pas de la page. Les propriétés top, right, bottom et left acceptent des pixels comme des pourcentages. Attention : un élément en absolute est retiré du flux, il ne réserve plus sa place et peut recouvrir ses voisins.

fixed : fixe par rapport à l’écran

Même logique de placement, mais par rapport à la fenêtre du navigateur : l’élément reste visible au même endroit pendant le défilement. C’est la valeur des boutons « retour en haut » ou des bandeaux de cookies.

sticky : le meilleur des deux mondes

Valeur apparue après la rédaction d’origine de ce cours et devenue incontournable : l’élément défile normalement avec la page, puis se fige quand il atteint le seuil donné. Un en-tête qui reste collé en haut de l’écran tient en deux lignes : 

.entete {
  position: sticky;
  top: 0;
}

Testé dans Chrome 150 : avant défilement, l’en-tête est à sa place dans la page ; après 1 500 px de défilement, il est exactement à 0 px du haut de la fenêtre. Aucun JavaScript nécessaire, alors qu’il en fallait à l’époque des floats.

Centrer un bloc

Le grand classique. Pour centrer horizontalement un bloc de largeur connue, margin avec la valeur auto fait le travail : le navigateur répartit l’espace restant à parts égales de chaque côté. 

.centre {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

Vérifié dans le navigateur : dans un conteneur de 900 px, le bloc de 300 px se retrouve avec exactement 300 px de marge de chaque côté.

Pour centrer verticalement ET horizontalement, la solution moderne tient en trois lignes sur le parent, grâce à flexbox : 

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

L’enfant se retrouve pile au centre des deux axes. À l’époque des floats, ce centrage vertical était un casse-tête célèbre ; c’est aujourd’hui un problème résolu.

Et float, alors ?

L’ancienne version de cet article présentait float comme une méthode de positionnement, avec la propriété clear pour en limiter les dégâts. En 2026, soyons clairs : float ne sert plus à construire des mises en page. Son usage légitime restant est celui pour lequel la propriété a été créée : faire habiller un texte autour d’une image. 

img.illustration {
  float: left;
  margin-right: 16px;
}

Pour tout le reste (colonnes, grilles, alignements), flexbox et grid sont plus simples, plus prévisibles et conçus pour ça.

Ce qu’il faut retenir

Les deux prochains cours de cette série iront plus loin : un guide complet de Flexbox, puis un guide de CSS Grid pour construire de vraies grilles de page. En attendant, si vous préférez reprendre depuis le début, direction les bases pour bien débuter en HTML.

Une question, une remarque ? Les commentaires sont là pour ça.