html - padding增加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;
}

来自 here

通过给父 div fixed_width 和 relative_container width:700px;height:100px; padding:0px;，但是当我将填充应用到 .content 或 .obscure 时，div 会扩展以覆盖下面的 .extra_margins .谢谢!

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