How to change a DIV padding without affecting the width/height ?

Question

I have a div that I want to specify a FIXED width and height for, and also a padding which can be changed without decreasing the original DIV width/height or increasing it, is there a CSS trick for that, or an alternative using padding?

score 234 · Answer 1 · edited Jan 05 '20 at 15:36

234

Declare this in your CSS and you should be good:

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

This solution can be implemented without using additional wrappers.

This will force the browser to calculate the width according to the "outer"-width of the div, it means the padding will be subtracted from the width.

edited Jan 05 '20 at 15:36

DDiamond

1,628
2
7
17

answered Jul 26 '13 at 16:31

adswebwork

5,245
3
19
9

1

it works like a charm i am newbie just search this property and it works Great Man ..... – nida Nov 30 '13 at 19:07
1

Are there any side effects that I should be mindful when using that? – Radi Jun 23 '15 at 17:04
20

This solution is better than the accepted one, and it is safe to not use prefixes anymore: http://shouldiprefix.com/#box-sizing – fgblomqvist Aug 27 '15 at 09:03
@adswebwork You saved my large amount of my time. Thank you. – Hardik Chaudhary May 24 '18 at 12:47
How about height? This does not seem to resolve the height growing with padding-top|bottom. – kevr Jan 14 '23 at 15:02

score 81 · Accepted Answer · answered Feb 08 '10 at 23:14

81

Solution is to wrap your padded div, with fixed width outer div

HTML

<div class="outer">
    <div class="inner">

        <!-- your content -->

    </div><!-- end .inner -->
</div><!-- end .outer -->

CSS

.outer, .inner {
    display: block;
}

.outer {
    /* specify fixed width */
    width: 300px;
    padding: 0;
}

.inner {
    /* specify padding, can be changed while remaining fixed width of .outer */
    padding: 5px;
}

answered Feb 08 '10 at 23:14

Juraj Blahunka

17,913
6
34
52

Just wan't to clearify, I'm not sure, but this would only work for horizontal padding right? As height: auto doesn't fill up the parent like width: auto does. – Jonathan Mar 22 '13 at 15:36

score 20 · Answer 3 · answered Feb 08 '10 at 23:18

20

Sounds like you're looking to simulate the IE6 box model. You could use the CSS 3 property box-sizing: border-box to achieve this. This is supported by IE8, but for Firefox you would need to use -moz-box-sizing and for Safari/Chrome, use -webkit-box-sizing.

IE6 already computes the height wrong, so you're good in that browser, but I'm not sure about IE7, I think it will compute the height the same in quirks mode.

answered Feb 08 '10 at 23:18

wsanville

37,158
8
76
101

css3 is still very new like the iPad :) – CodeOverload Feb 08 '10 at 23:32

score 10 · Answer 4 · answered Mar 13 '15 at 14:44

10

try this trick

div{
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;    
 box-sizing: border-box;      
}

this will force the browser to calculate the width acording to the "outer"-width of the div, it means the padding will be substracted from the width.

answered Mar 13 '15 at 14:44

K.A

173
1
3

7

this is the same as @adswebwork's answer, right? I appreciate the explanation of how it works, but that's probably better as a comment – craq Nov 24 '15 at 09:52
3

why post an identical answer – Andrew Feb 04 '17 at 01:22

score 5 · Answer 5 · answered Feb 08 '10 at 23:07

5

To achieve a consistent result cross browser, you would usually add another div inside the div and give that no explicit width, and a margin. The margin will simulate padding for the outer div.

answered Feb 08 '10 at 23:07

Pekka

442,112
142
972
1,088

score 2 · Answer 6 · answered Jun 07 '21 at 16:52

2

if border box doesnt work you can try adding a negative margin with your padding to the side that's getting expanded. So if your container is getting pushed to the right you could do this.

.classname{
  padding: 8px;
  margin-right: -8px;
}

answered Jun 07 '21 at 16:52

denis

159
9

How to change a DIV padding without affecting the width/height ?

6 Answers6

Linked