如何使div中的填充向内

Posted 2023-03-06

【中文标题】如何使div中的填充向内

【英文标题】：How to make padding in a div go inward

【发布时间】：2013-07-04 11:34:44

【问题描述】：

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

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

【问题讨论】：

查看可能重复的***.com/questions/779434/…

【参考方案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 属性并未得到广泛支持。

【参考方案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>