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: 200         


        

Answer 1

simply add box-sizing: border-box;

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

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 4

Try this

box-sizing: border-box;

Answer 5

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 6

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.