269

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?

danwellman
  • 9,068
  • 8
  • 60
  • 88
Sam
  • 18,417
  • 5
  • 22
  • 11

9 Answers9

450

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.

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Pramod
  • 4,517
  • 1
  • 13
  • 2
  • 19
    This is a great solution for borders, but how does this help for padding? – Kato Aug 29 '12 at 05:01
  • 7
    This is pure magic! - It fixes the box model we all know and hate! i.e. makes it work the way intuition suggests it should - rather than the specs - but as far as I know doesn't break any specs either :D This article clarifies it well... http://stackoverflow.com/questions/779434/preventing-padding-propety-from-changing-width-or-height-in-css – Roger Heathcote Sep 05 '12 at 15:45
  • 2
    @technicalbloke Your link just goes back to this question. – mhenry1384 Oct 23 '12 at 18:08
  • 12
    Whoops yeah, copy and paste cock up. This is the link I meant to share... http://paulirish.com/2012/box-sizing-border-box-ftw/ – Roger Heathcote Oct 24 '12 at 19:54
  • 1
    Many of you should consider the width: auto trick below. Works across browsers, less code, etc. – Ryan Shillington Oct 03 '13 at 21:07
  • 1
    this doesn't work for padding fully...meaning if i have 20px padding top+bottom combined and 0 px height. then height is still 20px. But if i make height 20 then height is still 20. That sucks.. – Muhammad Umer Dec 12 '13 at 02:46
  • @Muhammad: Put a 20px sized dragon into a box of size 40px and shrink the box. Guess what the minimum size is before the dragon gets angry. Your comment is invalid and will get eaten by the dragon. – dube Dec 16 '14 at 12:51
  • thank you so much! Short explanation: "box-sizing" sets what the dimensions should include (e.g. should the specified width INCLUDE padding & margin?). Day is saved! – mn. Dec 21 '14 at 05:53
  • Just a note that the vendor-specific properties are no longer necessary in the latest Chrome and Safari. `box-sizing` is all you need. – devios1 Sep 15 '16 at 17:53
  • 1
    I'm not sure if I'm missing something, but box-sizing doesn't seem to fix the width in Chrome 65 https://jsfiddle.net/q7h4zg2e/ – Qi Fan Apr 28 '18 at 00:05
  • `box-sizing: border-box;` works on Firefox, I don't need the `-moz-` prefix. – Aaron Franke Dec 09 '19 at 10:35
41

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.

franga2000
  • 587
  • 1
  • 9
  • 19
rvarcher
  • 1,566
  • 1
  • 12
  • 14
36

Try this

box-sizing: border-box;
Ajay Gupta
  • 2,867
  • 23
  • 28
13

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>
mvndaai
  • 3,453
  • 3
  • 30
  • 34
  • 2
    This is the only solution that I found worked for my fixed width div. box-sizing did not stop the padding from impacting the width unfortunately, so thanks a tonne for pointing out this awesome little property. – Stevo Jan 21 '20 at 00:02
9

simply add box-sizing: border-box;

chopper
  • 6,649
  • 7
  • 36
  • 53
Felix Wong
  • 119
  • 1
  • 3
9

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

Gabriel
  • 182
  • 4
  • 9
0

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

box-sizing: border-box;

Rohit Soni
  • 47
  • 1
  • 1
  • 6
0

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.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • 3
    Guffa, that's not how the standards are supposed to work at all. Padding is definitely not supposed to affect the dimensions of the element to which it's being applied. With the greatest respect, is it possible you're confusing 'padding' with 'margin'? – da5id Apr 22 '09 at 22:37
  • 1
    Yes, the padding is definitely supposed to affect the dimensions of the element. I think that it's you who is confused... how do you propose that the margin would affect the dimensions of the element? – Guffa Apr 22 '09 at 22:44
  • Actually, you know I think we're both right in a way. I'm so used to coping with the effects that I'd entirely forgotten the standard. I found a good explanation here http://www.quirksmode.org/css/box.html – da5id Apr 22 '09 at 22:46
  • So, my apologies Mr Guffa. But for practical purposes (which is after all what we're talking about) my advice is still good no? – da5id Apr 22 '09 at 22:47
  • Well, you are right so far as that there is a box model bug, but it doesn't apply to this question... :) – Guffa Apr 22 '09 at 23:13
  • Yes, what Guffa said is correct in that it's behaving according to the standard. However, I don't think that's what the person who asked this question wanted to know. Pramod's answer was much more useful. – David Sanders Aug 14 '14 at 05:25
-2

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.

sean
  • 5
  • 1