Maison > interface Web > tutoriel CSS > Comment puis-je créer une division de 100 % de largeur avec des marges ?

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

Barbara Streisand
Libérer: 2024-12-24 12:58:18
original
446 Les gens l'ont consulté

How Can I Create a 100% Width Div with Margins?

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;
}
Copier après la connexion

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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal