Y a-t-il une raison pour laquelle le remplissage ajoute à la taille d'un élément ?

Question

J'ai été très surpris quand j'ai découvert qu'un <div> avec une taille de - disons - 200px devient 220px de large si vous lui donnez 10px de padding. Cela n'a aucun sens pour moi, la taille externe ne devrait pas changer quand un paramètre interne le fait. Cela vous oblige à ajuster la taille à chaque fois que vous modifiez le remplissage.

Est-ce que je fais quelque chose de mal, ou y a-t-il une raison à ce comportement ?

EDIT : Je sais que c'est comme ça que c'est censé fonctionner, ma question est pourquoi ? Est-ce que c'est logique d'une manière que je ne comprends pas ? Est-ce que cela présente un avantage par rapport à l'approche inverse qui consiste à séparer la taille et le remplissage ?

Answer 1

Il existe deux "modèles de boîte" différents : l'un ajoute le remplissage (et la bordure) à la boîte spécifiée. width tandis que l'autre ne le fait pas. Avec l'avènement de CSS3, vous pouvez heureusement basculer entre les deux modèles. Plus précisément, le comportement que vous recherchez peut être obtenu en spécifiant

box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 200px;

dans le CSS de votre div. Ainsi, dans les navigateurs modernes, la division conservera toujours une largeur de 200 px, quoi qu'il arrive. Pour plus de détails et une liste des navigateurs pris en charge, voir ce guide .

Edit : En ce qui concerne votre édition sur pourquoi le modèle traditionnel de la boîte est tel qu'il est, Wikipedia en fait offre un aperçu :

Avant HTML 4 et CSS, très peu d'éléments HTML supportaient à la fois la bordure et le remplissage, de sorte que la définition de la largeur et de la hauteur d'un élément n'était pas très controversée. Cependant, elle variait en fonction de l'élément. L'attribut HTML width d'un tableau définissait la largeur du tableau, y compris sa bordure. D'autre part, l'attribut HTML width d'une image définissait la largeur de l'image elle-même (à l'intérieur de toute bordure). À l'époque, le seul élément à prendre en charge le remplissage était la cellule du tableau. La largeur de la cellule était définie comme "la largeur suggérée pour le contenu d'une cellule en pixels, à l'exclusion du remplissage de la cellule".

CSS a introduit la marge, la bordure et le rembourrage pour de nombreux autres éléments. Il a adopté une définition de la largeur par rapport au contenu, à la bordure, à la marge et au remplissage similaire à celle d'une cellule de tableau. C'est ce que l'on appelle depuis le modèle de boîte du W3C.

Answer 2

La raison pour laquelle il en est ainsi est que, techniquement, la largeur des éléments est censée s'appliquer au contenu, et non au conteneur.

Selon la spécification CSS1, publiée par le World Wide Web Consortium (W3C) en 1996 et révisée en 1999, lorsqu'une largeur ou une hauteur est explicitement spécifiée pour un élément de niveau bloc, elle doit déterminer uniquement la largeur ou la hauteur de l'élément visible, le remplissage, les bordures et les marges étant appliqués par la suite.

Plus d'informations sur ce comportement *

* Clause de non-responsabilité : Oui, c'est mon propre blog et je pense avoir bien expliqué le modèle de la boîte, donc je le mets en référence.

Answer 3

Le rembourrage est supposée s'ajoute à la largeur donnée d'un objet.

Voir les CSS 2.1 spécification pour le modèle de boîte .

S'il est vrai que vous pouvez considérer le rembourrage comme un attribut interne ou externe, le fait est que, selon les spécifications actuelles, il s'agit d'un attribut externe. Il s'agissait d'un choix entre deux options, pour autant que je sache, également valables.

Je ne me suis pas renseigné sur le box-model attribut, mais en supposant qu'alex ait raison, alors à l'avenir vous pourrez choisir entre les deux façons d'interpréter le rembourrage.

Answer 4

Si la taille augmente avec le rembourrage, le système fonctionne comme prévu. Dans les navigateurs dont les modèles de boîte ne fonctionnent pas, comme les anciennes versions d'Internet Explorer, la division aura une largeur de 100 pixels, mais c'est une mauvaise manipulation du CSS.

http://www.w3schools.com/css/css_boxmodel.asp

Answer 5

Si le modèle de la boîte a pas travailler de cette façon, comment gérer le remplissage autour d'une image ? Préféreriez-vous que la taille d'une img avec remplissage ne correspond pas aux dimensions en pixels de l'image ? Ou que le remplissage recouvre l'image ?

Il est préférable que le comportement par défaut soit que la largeur du conteneur ne soit pas affectée par les valeurs de padding ou de marge.