Comment puis-je créer une largeur de division à 100 % tout en conservant les marges ?

Affichage d'un div avec 100 % de largeur et de marges

Lorsque vous essayez d'afficher un div avec 100 % de largeur tout en conservant les marges, certaines propriétés CSS peut entrer en jeu.

Dans le code fourni, la structure HTML comprend un div conteneur (#page) et un div (#margin) avec la largeur et les marges souhaitées à 100 %. Cependant, faire flotter les éléments et définir leur largeur à 100 % peut entraîner un div interne dépassant la largeur du conteneur.

Pour résoudre ce problème, la fonction CSS calc() peut être utilisée. Dans le code CSS mis à jour :

#margin {
  width: calc(100% - 10px);
}

Cette expression soustrait 10 pixels (la largeur de marge souhaitée) de la largeur disponible, permettant au div interne de s'étendre complètement dans le conteneur tout en respectant les marges désignées.

Alternativement, au lieu d'utiliser des marges, on peut utiliser padding et la propriété box-sizing: border-box. Lors de la définition de box-sizing sur border-box, le remplissage est inclus dans la largeur totale, prenant en compte à la fois la largeur et les marges au sein du div :

#page {
  padding: 10px;
}

#margin {
  box-sizing: border-box;
  width: 100%;
}

En implémentant l'une ou l'autre de ces solutions, il devient possible d'afficher un div avec 100% de largeur tout en préservant les marges souhaitées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!