所以我正在尝试向 div 框添加填充,但它只会使框本身变大并偏离设计,关于如何阻止它这样做的任何想法,这里是 CSS 代码
#mainbox {
background-color:#111111;
padding:0px;
margin:0 auto;
width:900px;
border:solid 1px;
}
CSS3box-sizing: border-box
属性可能正是您想要的:
#mainbox {
background-color:#111111;
padding:10px;
margin:0 auto;
width:90px;
border:solid 1px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
默认情况下,width
仅适用于内容,并margin
在padding
事后添加。因此,如果您width
是90px
,并且您添加了 的填充10px
,那么您div
将是100px
。
CSS3 中的box-sizing
属性使浏览器包含border
、margin
和padding
with width
,使数学变得更容易一些,尤其是当您事先不知道所有内容的宽度时。
注意:该padding-box
属性未得到广泛支持。
检查我附上的样品。我将它与悬停一起使用。你也可以直接使用。
div {
width:100px;
height:100px;
background-color:#ccc;
margin:50px;
}
div:hover {
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
<div></div>