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

User · Answer

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.

User · Answer

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

User · Answer

Solution is to wrap your padded div  with fixed width outer div  HTML   lt div class  outer  gt       lt div class  inner  gt            lt  -- your content -- gt        lt  div gt  lt  -- end  inner -- gt   lt  div gt  lt  -- end  outer -- gt    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

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to html