Comment puis-je créer une division avec une largeur de 100 % et conserver les marges ?

Afficher un div avec 100 % de largeur et de marges

Créer un div avec 100 % de largeur tout en conservant les marges peut être un défi. Il existe cependant plusieurs approches pour y parvenir :

float et calc() Fonction CSS :

La propriété float permet de positionner le div horizontalement sans affecter le flux des autres éléments. La fonction calc() peut être utilisée pour calculer la largeur souhaitée pour le div avec des marges.

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}

padding et box-sizing : border-box

Le rembourrage et le dimensionnement de la boîte peuvent également être utilisés pour créer l'effet souhaité :

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}

Avec box-sizing défini sur border-box, le remplissage est inclus dans le calcul de la largeur. Cela garantit que les marges sont appliquées en dehors de la zone rembourrée.

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!