css - 如何使 div 中的填充向内

Question

所以我正在尝试向 div 框添加填充，但它只会使框本身变大并偏离设计，关于如何阻止它这样做的任何想法，这里是 CSS 代码

#mainbox {
background-color:#111111;
padding:0px;
margin:0 auto;
width:900px;
border:solid 1px;
}

Answer 1

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和paddingwith width，使数学变得更容易一些，尤其是当您事先不知道所有内容的宽度时。

注意：该padding-box属性未得到广泛支持。

Answer 2

检查我附上的样品。我将它与悬停一起使用。你也可以直接使用。

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>