Latest web development tutorials

taille de la boîte de CSS3

CSS3 box-sizing propriété pour définir la largeur et la hauteur des attributs contient padding (rembourrage) et la frontière (frontière).

support du navigateur

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.

Immédiatement après le navigateur du numéro ou un préfixe -moz- spécifié.

propriété
box-sizing 10.0
4.0 -webkit- 		8.0 29,0
2.0 -moz- 		5.1
3.1 -webkit- 		9.5

Ne pas utiliser la propriété CSS3 box-sizing

Par défaut, la largeur et l'élément de calcul moyen haut de gamme est la suivante:

largeur (largeur) + padding (rembourrage) + frontière (frontière) = éléments de largeur réelle

hauteur (hauteur) + padding (rembourrage) + frontière (frontière) = hauteur réelle de l'élément

Cela signifie que lorsque nous avons fixé la largeur / hauteur de l'élément, la hauteur et la largeur d'affichage de l'élément serait plus grand (à cause de l'élément de frontière avec rembourrage va calculer la largeur / hauteur).

Ceci est une petite boîte (largeur est 300px, la hauteur est 100px).

Ceci est une grande boîte (largeur est 300px, la hauteur est 100px).

Ces deux élément <div>, bien que la largeur et la hauteur les mêmes paramètres, mais la taille du vrai spectacle incompatible parce div2 pad_length:

Exemples

.div1 {
width: 300px;
hauteur: 100px;
border: 1px solid bleu;
}

.div2 {
width: 300px;
hauteur: 100px;
padding: 50px;
border: 1px rouge solide;
}

Essayez »

Si vous souhaitez utiliser cette méthode pour obtenir la petite boîte et contient dans les marges, vous devez tenir compte de la frontière et à l'intérieur de la largeur de la marge.

Le CSS3 box-sizing propriété une bonne solution à ce problème.

Utiliser CSS3 propriété box-sizing

CSS3 box-sizing attribut contient padding (rembourrage) et la frontière (frontière) en largeur et la hauteur d'un élément.

Si vous définissez sur l'élément box-sizing: border-box; le rembourrage (padding) et la frontière (frontière) est également inclus dans la largeur et la hauteur de:

Deux div est maintenant la même taille!

Ce tutoriel!

Voici deux <div> élément est ajouté box-sizing: border-box; propriétés d'un exemple simple.

Exemples

.div1 {
width: 300px;
hauteur: 100px;
border: 1px solid bleu;
box-sizing: border-box;
}

.div2 {
width: 300px;
hauteur: 100px;
padding: 50px;
border: 1px rouge solide;
box-sizing: border-box;
}

Essayez »

A en juger par les résultats des box-sizing: border-box; de meilleurs résultats, il est également un grand nombre de développeurs ont besoin.

Le code suivant peut faire tous les éléments d'une manière plus intuitive pour afficher la taille. De nombreux navigateurs supportent déjà box-sizing: border-box; (mais pas tous - ce qui explique pourquoi les éléments d'entrée et de texte mis en largeur: 100%; la largeur du poste ne sont pas les mêmes).

Tous les éléments à l'aide box-sizing est plus recommandé:

Exemples

* {
box-sizing: border-box;
}

Essayez »