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

User · Answer

Try this  box-sizing  border-box

User · Answer

simply add  box-sizing  border-box

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D   indent   x000D    text-indent  1em  x000D    x000D   border   x000D    border-style  solid  x000D    x000D   lt div class  border  gt  x000D    Non indented x000D   lt  div gt  x000D   x000D   lt br gt  x000D   x000D   lt div class  border indent  gt  x000D    Indented x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

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

Examples related to html

Examples related to css

Examples related to padding