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?

DDiamond · Accepted Answer · 2020-01-05 15:36:43Z

242

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 5, 2020 at 15:36

DDiamond

1,6282 gold badges11 silver badges19 bronze badges

answered Jul 26, 2013 at 16:31

adswebwork

5,5253 gold badges22 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

nida Over a year ago

it works like a charm i am newbie just search this property and it works Great Man .....

Radi Over a year ago

Are there any side effects that I should be mindful when using that?

fgblomqvist Over a year ago

This solution is better than the accepted one, and it is safe to not use prefixes anymore: shouldiprefix.com/#box-sizing

Hardik Chaudhary Over a year ago

@adswebwork You saved my large amount of my time. Thank you.

kevr Over a year ago

How about height? This does not seem to resolve the height growing with padding-top|bottom.

|

Juraj Blahunka · Accepted Answer · 2010-02-08 23:14:37Z

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; }

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.

wsanville · Accepted Answer · 2010-02-08 23:18:00Z

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.

K.A · Accepted Answer · 2015-03-13 14:44:52Z

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.

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

Pekka · Accepted Answer · 2010-02-08 23:07:58Z

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.

denis · Accepted Answer · 2021-06-07 16:52:12Z

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; }

Collectives™ on Stack Overflow

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

6 Answers 6

6 Comments

1 Comment

1 Comment

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

1 Comment

1 Comment

2 Comments

Comments

1 Comment

Linked

Related