如何更改DIV填充而不影響寬度/高度？

Question

我有一個div，我想指定一個固定的寬度和高度，還有一個可以在不降低原始DIV寬度/高度或增加它的情況下進行更改的填充，是否有CSS技巧或使用替代方法填充？

Answer 1

解決辦法是換你填充DIV，與固定寬度的外層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 2

要實現跨瀏覽器的一致結果，通常需要在div中添加另一個div，並且不給出明確的寬度和margin。 margin將模擬外部div的padding。

Answer 3

聽起來你希望模擬IE6盒子模型。您可以使用CSS 3屬性box-sizing: border-box來實現此目的。這由IE8支持，但對於Firefox，您需要使用-moz-box-sizing，對於Safari/Chrome，請使用-webkit-box-sizing。

IE6已經計算了錯誤的高度，所以你在這個瀏覽器中表現不錯，但我不確定IE7，我認爲它會在怪癖模式下計算高度。

Answer 4

聲明此在你的CSS，你應該是好的：

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

該解決方案可以在不使用額外的包裝來實現

Answer 5

試試這招

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

這將迫使瀏覽器根據div的「外部」寬度計算寬度，這意味着填充將從寬度中減去。