填充增加div的寬度和高度

Question

如何修改這些div，以便在更改填充時，它們的高度和寬度不會擴展？ 我已經嘗試實施

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

從這里開始

通過給父divs fixed_width和relative_container width:700px;height:100px; padding:0px; width:700px;height:100px; padding:0px; ，但是當我將填充應用於.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