Question

所以我正在尝试将填充添加到div框中，但它只是使框本身更大并抛弃了设计，任何关于如何阻止它的想法，这里是CSS代码

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

Answer 1

CSS3 box-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 width，使数学更容易一些，尤其是当你事先不知道所有事物的宽度。

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

Answer 2

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

如何在div中填充内部

2 个答案: