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

Affichage d'un div avec marge de 100 % de largeur

Pour afficher un div extensible avec une largeur de 100 % et des marges, les méthodes suivantes peuvent être employé :

Utilisation de calc() Fonction

Cette méthode nécessite la prise en charge du navigateur pour la fonction CSS calc(). Le code suivant peut être utilisé :

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

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

Utilisation de Padding et Box-Sizing

Cette méthode nécessite la prise en charge par le navigateur de la propriété CSS box-sizing et de la bordure- valeur de la boîte :

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

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

Utilisation du padding et du dimensionnement de la boîte : border-box permet d'inclure la marge dans la largeur du élément.

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!