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

Asked 22/4, 2009 at 22:0 Answered 19/3, 2022 at 20:8

275

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?

Foreignborn answered 22/4, 2009 at 22:0 Comment(1)

I'm sad to say, but I like how IE handles this... Makes much more sense to me ... – Vicarage 6/6, 2012 at 13:22

459

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.

Jacki answered 20/8, 2012 at 8:58 Comment(11)

This is a great solution for borders, but how does this help for padding? – Repetend 29/8, 2012 at 5:1

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... #779934 – Smalt 5/9, 2012 at 15:45

@technicalbloke Your link just goes back to this question. – Geibel 23/10, 2012 at 18:8

Whoops yeah, copy and paste cock up. This is the link I meant to share... paulirish.com/2012/box-sizing-border-box-ftw – Smalt 24/10, 2012 at 19:54

Many of you should consider the width: auto trick below. Works across browsers, less code, etc. – Southwick 3/10, 2013 at 21:7

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.. – Pavlov 12/12, 2013 at 2: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. – Jacobsohn 16/12, 2014 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! – Aho 21/12, 2014 at 5: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. – Demarcusdemaria 15/9, 2016 at 17:53

I'm not sure if I'm missing something, but box-sizing doesn't seem to fix the width in Chrome 65 jsfiddle.net/q7h4zg2e – Kamal 28/4, 2018 at 0:5

box-sizing: border-box; works on Firefox, I don't need the -moz- prefix. – Isonomy 9/12, 2019 at 10:35

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.

Raila answered 22/4, 2009 at 22:7 Comment(1)

Why use two divs when you can use one? – Isonomy 9/12, 2019 at 10:36

Try this

box-sizing: border-box;

Calabria answered 10/9, 2015 at 12:46 Comment(0)

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>

Hobson answered 15/1, 2015 at 2:28 Comment(1)

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. – Danny 21/1, 2020 at 0:2

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

Posthumous answered 19/3, 2022 at 20:8 Comment(0)

simply add box-sizing: border-box;

Desmonddesmoulins answered 24/6, 2017 at 3:19 Comment(2)

This is simply exactly the same as what other answers already say here. – Segregationist 24/6, 2017 at 4:14

box-sizing: border-box; = perfect answer - uncomplicated- short- works – Worse 30/11, 2023 at 4:13

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.

Salivation answered 22/4, 2009 at 22:30 Comment(6)

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'? – Finzer 22/4, 2009 at 22:37

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? – Salivation 22/4, 2009 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 quirksmode.org/css/box.html – Finzer 22/4, 2009 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? – Finzer 22/4, 2009 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... :) – Salivation 22/4, 2009 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. – Mainly 14/8, 2014 at 5:25

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

box-sizing: border-box;

Clarey answered 30/1, 2022 at 17:5 Comment(0)

-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.

Church answered 14/4, 2012 at 18:32 Comment(1)

This is the same as the answer given by @rvarcher. – Hebbe 10/1, 2014 at 11:14

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags