How to change a DIV padding without affecting the width/height ?
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.
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.
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;
}
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.