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

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

2010-02-08 Ryan

解決辦法是換你填充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; 
}

來源

2010-02-08 23:14:37

謝謝！並感謝大家的回答 – Ryan 2010-02-08 23:20:05

只是不想清理，我不確定，但這隻適用於水平填充權？作爲高度：auto不會填充寬度：auto自動。 – 2013-03-22 15:36:51

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

來源

2010-02-08 23:07:58

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

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

來源

2010-02-08 23:18:00 wsanville

css3仍然是非常新的像iPad :) – Ryan 2010-02-08 23:32:21

129

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

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

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

來源

2013-07-26 16:31:34 adswebwork

它的作品就像一個魅力我是新手只是搜索這個屬性，它的作品偉人..... – nida 2013-11-30 19:07:24

+1 - Best Answer！ – Kareem 2014-10-27 13:13:39

使用時應該注意哪些副作用？ – Radi 2015-06-23 17:04:55

試試這招

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

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

來源

2015-03-13 14:44:52

這和@ adswebwork的答案是一樣的，對吧？我很欣賞它如何工作的解釋，但這可能更好，因爲發表評論 – craq 2015-11-24 09:52:21

爲什麼發表相同的答案 – Andrew 2017-02-04 01:22:54

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

回答

相關問題