Empêcher la capacité de remplissage de changer la largeur ou la hauteur en CSS

Question

Donc, je suis entrain de créer un site avec DIVs. Tout fonctionne bien sauf quand je crée un DIV, dans mon fichier CSS je les créer comme ceci (exemple):

newdiv {
width: 200px;
height: 60px;
padding-left: 20px;
text-align: left;
}

MAINTENANT, quand j'ajoute l' padding-left de la propriété, la largeur de l' DIV changements de 220px, et je veux qu'il reste à 200px.

Disons que je me suis créer un autre DIV nommée anotherdiv exactement la même que newdiv, et le mettre à l'intérieur de l' newdiv mais newdiv a pas de rembourrage et de l' anotherdiv a padding-left: 20px. J'obtiens la même chose, newdiv's de la largeur sera 220px.

Comment puis-je résoudre ce problème?

Answer 1

Ajouter une propriété:

 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
 

Mais notez que cela ne fonctionnera pas dans Internet Explorer sous la version 8.

Answer 2

Mettez un div dans votre newdiv avec la largeur: auto; et marge à gauche: 20px;

Supprimez le remplissage de newdiv.

La page du modèle W3 Box contient de bonnes informations.

Answer 3

lorsque j'ajoute le padding-left de la propriété, la largeur de la DIV changements à 220px

Oui, c'est exactement selon les normes. C'est la façon dont il est censé être.

Disons que je me suis créer un autre DIV nommé anotherdiv exactement le même que newdiv, et de le mettre à l'intérieur de newdiv mais newdiv a pas de rembourrage et anotherdiv a padding-left: 20px. Je reçois le même chose, newdiv la largeur sera 220px;

Non, newdiv restera à 200px de large.

Answer 4

Il y a deux façons de résoudre ce problème, la première consiste à soustraire la valeur de remplissage de width et la seconde à utiliser deux éléments DIV, l'un contient l'autre, l'un spécifie la largeur et l'autre la propriété padding,

pour plus d'informations, voir ceci: http://www.wpfasthelp.com/prevent-css-padding-changing-div-elements-width-height.htm

Answer 5

il suffit de changer la largeur de votre div en 160px si vous avez un rembourrage de 20px il ajoute 40px en plus à la largeur de votre div donc vous devez soustraire 40px de la largeur afin de garder votre div normal et non distordu votre texte a tout foiré.