[英]padding increases width and height of div
how can I modify these divs so that when I change their padding, their height and width do not expand? 如何修改这些div,以便在更改填充时,它们的高度和宽度不会扩展? I have tried to implement
我已经尝试实施
.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;
}
by giving the parent divs fixed_width
and relative_container
width:700px;height:100px; padding:0px;
通过给父divs
fixed_width
和relative_container
width:700px;height:100px; padding:0px;
width:700px;height:100px; padding:0px;
, but when I apply padding to .content
or .obscure
, the divs expand to cover .extra_margins below
. ,但是当我将填充应用于
.content
或.obscure
,div会扩展为覆盖.extra_margins below
。 Thanks! 谢谢!
http://jsfiddle.net/loren_hibbard/ZmJ9R/ http://jsfiddle.net/loren_hibbard/ZmJ9R/
You can use CSS3 box-sizing
property to do this: 您可以使用CSS3
box-sizing
属性来执行此操作:
box-sizing: border-box;
http://css-tricks.com/box-sizing/ http://css-tricks.com/box-sizing/
Supported in IE8+ but some browsers may require a prefix: 在IE8 +中受支持,但某些浏览器可能需要前缀:
http://caniuse.com/css3-boxsizing http://caniuse.com/css3-boxsizing
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.