How do I prevent the padding property from changing width or height in CSS?

Question

I am creating a site with DIVs. Everything's working out except when I create a DIV. I create them like this (example):

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

When I add the padding-left property, the width of the DIV changes to 220px, and I want it to remain at 200px.

Let's say I create another DIV named anotherdiv exactly the same as newdiv, and put it inside of newdiv but newdiv has no padding and anotherdiv has padding-left: 20px. I get the same thing, newdiv's width will be 220px.

How can I fix this problem?

Answer 1

Add property:

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

Note: This won't work in Internet Explorer below version 8.

Answer 2

Put a div in your newdiv with width: auto and margin-left: 20px

Remove the padding from newdiv.

The W3 Box model page has good info.

Answer 3

Try this

box-sizing: border-box;

Answer 4

If you would like to indent text within a div without changing the size of the div use the CSS text-indent instead of padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}

<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>

Answer 5

A lot of the answers above are correct, but provided little explanation, so i decided to add this for anyone that might need it.

By default, every element box-sizing parameter is set to content-box. Which means, that if you set an element width to 200px and then add a padding of 20px on both horizontal end, this would result to a total width of 240px for that element.

to fix this, you simply need to update the box-sizing parameter and set this to border-box in your css. Or you can do this for all elements by simply adding the following.

* {
     box-sizing: border-box 
  }

This tells the browser to account for any border and padding in the values you specify for an element's width and height.

So for an element set to border-box with a width of 200px, and a padding of 20px on both sides, it's total width would still remain 200px (160px as content box and 40px as padding).

Hope that helps. You read more on css box-sizing

Answer 6

simply add box-sizing: border-box;

Answer 7

when I add the padding-left property, the width of the DIV changes to 220px

Yes, that is exactly according to the standards. That's how it's supposed to work.

Let's say I create another DIV named anotherdiv exactly the same as newdiv, and put it inside of newdiv but newdiv has no padding and anotherdiv has padding-left: 20px. I get the same thing, newdiv's width will be 220px;

No, newdiv will remain 200px wide.

Answer 8

This would work in all cases, with this the extra padding included in predefined width

box-sizing: border-box;

Answer 9

just change your div width to 160px if you have a padding of 20px it adds 40px extra to the width of your div so you need to subtract 40px from the width in order to keep your div looking normal and not distorted with extra width on it and your text all messed up.