Agencement CSS - Largeur et max-width

Utilisez width, max-width et margin: auto;

Comme mentionné dans le chapitre précédent, les éléments en bloc occupent toujours toute la largeur disponible (étendant le plus possible à gauche et à droite).

Définir la largeur des éléments en bloc width Cela empêchera son extension jusqu'aux bords de son conteneur. Ensuite, vous pouvez régler les marges sur auto pour centrer l'élément horizontalement dans son conteneur. L'élément occupera la largeur spécifiée, et l'espace restant sera réparti de manière égale entre les marges :

La largeur de l'élément <div> est de 500px, et les marges sont réglées sur auto.

Attention :Lorsque la fenêtre du navigateur est plus petite que la largeur de l'élément, celui-ci <div> provoquera des problèmes. Le navigateur ajoutera une barre de défilement horizontale à la page.

Dans ce cas, utiliser max-width Cela peut améliorer la gestion des petites fenêtres par le navigateur. Il est important de le faire pour rendre le site accessible sur les petits appareils :

L'élément <div> a une largeur maximale de 500px et la marge est définie sur auto.

Avis :Ajustez la taille de la fenêtre du navigateur à moins de 500 pixels pour voir la différence entre les deux div !

Voici un exemple des deux div ci-dessus :

Exemple

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
{}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
{}

Essayez-le vous-même