如何在不影响宽度/高度的情况下更改 DIV 填充？

Question

我有一个 div，我想为其指定一个固定的宽度和高度，还有一个可以在不减少原始 DIV 宽度/高度或增加它的情况下更改的填充，是否有 CSS 技巧，或者使用填充的替代方法？

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

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

Answer 6

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