填充增加div的寬度和高度

Question

我該如何修改這些div，以便當我改變它們的填充時，它們的高度和寬度不會擴大？我曾試圖通過給家長的div fixed_width和relative_containerwidth:700px;height:100px; padding:0px;從here

實施

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

，但是當我申請填充，以.content或.obscure，的div擴大到覆蓋.extra_margins below。謝謝！

http://jsfiddle.net/loren_hibbard/ZmJ9R/

Answer 1

您可以使用CSS3 box-sizing屬性來做到這一點：

box-sizing: border-box; 

http://css-tricks.com/box-sizing/

支持在IE8 +，但一些瀏覽器可能需要一個前綴：

http://caniuse.com/css3-boxsizing