CSS la largeur inclut-elle le remplissage?

146

Il semble que dans IE, la largeur inclut la taille du rembourrage. tandis qu'en FF, la largeur ne l'est pas. Comment puis-je faire en sorte que les deux se comportent de la même manière?

Merci.

css

— Jake
source

Vous devez probablement activer le mode conforme aux normes. Sans voir de code, cependant, je ne peux pas vous donner plus de conseils que cela.

— Jeff Hubbard

307

IE utilisait le modèle de boîte "border-box", plus pratique mais non standard . Dans ce modèle, la largeur d'un élément comprend le remplissage et les bordures. Par exemple:
#foo { width: 10em; padding: 2em; border: 1em; }
serait 10emlarge.
En revanche, tous les navigateurs redoutant les normes utilisent par défaut le modèle de boîte "content-box" . Dans ce modèle, la largeur d'un élément n'inclut ni le remplissage ni les bordures. Par exemple:
#foo { width: 10em; padding: 2em; border: 1em; }
sera en fait 16emlarge: 10em+ 2emrembourrage pour chaque côté, + 1embordure pour chaque bord.

Si vous utilisez une version moderne d'IE avec un balisage valide , un bon doctype et des en-têtes appropriés, elle respectera la norme. Sinon, vous pouvez forcer les navigateurs conformes aux normes modernes à utiliser "border-box" via:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

La première déclaration est nécessaire pour Opera, la seconde est pour Firefox, la troisième est pour Webkit et Chrome.

Voici un test simple que j'ai effectué il y a des années pour tester la déclaration de taille de boîte prise en charge par votre navigateur: http://phrogz.net/CSS/boxsizing.html

Notez que Webkit (Safari et Chrome) ne prend en charge le padding-boxmodèle de boîte via aucune déclaration.

— Phrogz
source

2

+1 pour mentionner à la fois les modèles de boîte de contenu et de boîte de bordure. Je voudrais peut-être préciser les différences.

— BoltClock

1

@BoltClock Merci pour l'impulsion de répondre plus rigoureusement. Actualisé.

— Phrogz du

Bonne réponse; J'essaie de me souvenir (ou de trouver) les noms des différentes options depuis quelques jours maintenant ... +1 =)

— David dit de réintégrer Monica le

Personne ne se soucie de l'opéra.

— Michael J. Calkins

3

@whitelettersinblankpapers Découvrez pourquoi W3Schools est nul , puis une référence bien meilleure qui vous mène au standard W3C . Ne suivez plus les liens vers W3Schools. En outre, ajoutez "MDN" à vos requêtes de moteur de recherche sur les normes Web à l'avenir.

— Phrogz

27

Une règle simple consiste à éviter d'utiliser la propriété padding / margin et width pour le même élément. ie Utilisez quelque chose de similaire à celui-ci

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

— Shankhan
source

J'utilise cette méthode régulièrement et je n'ai jamais de problèmes entre navigateurs.

— Kevin Beal

20

Je suis tombé sur cette question et même si elle a quelques années, j'ai pensé que je pourrais ajouter ceci au cas où quelqu'un se heurterait à ce fil.

CSS3 a maintenant une propriété de taille de boîte. Si vous définissez, dites,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

votre classe aura une largeur de 1000 pixels au lieu de 1030 pixels. Ceci est, bien sûr, incroyablement utile pour quiconque utilise une bordure de la taille d'un pixel avec des divs liquides, car cela résout un problème par ailleurs insoluble.

Mieux encore, le dimensionnement de la boîte est pris en charge par tous les principaux navigateurs, à l'exception de IE7 et des versions antérieures. Pour inclure tous les éléments dans la dimension de largeur ou de hauteur, définissez le dimensionnement de la boîte sur border-box. Pour agréger autres éléments à la largeur et / ou à la hauteur, qui est la valeur par défaut, vous pouvez définir le dimensionnement de la boîte sur "content-box".

Je ne suis pas sûr de l'état actuel de la syntaxe du navigateur, mais j'inclus toujours les préfixes -moz et -webkit:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

— Mason Barge
source

Oui, et Paul Irish a un bel article de blog à ce sujet ici: paulirish.com/2012/box-sizing-border-box-ftw

— Dave Burton

Comment cette réponse a-t-elle autant de votes positifs alors que la même réponse que celle acceptée qui a été écrite est 3 ans avant?

— dippas le

1

Avez-vous déclaré un doctype? Quand j'ai commencé à coder html, j'ai eu ce problème, et c'était de ne pas avoir déclaré de doctype. Mon favori est:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>

— tybro0103
source

1

pour ceux qui auraient encore le problème, jQuery a fourni deux propriétés outerWidth ()et innerWitdh ()pour connaître la largeur d'un objet avec ou sans bordures ...

— Patrick
source