如果 padding 在里面，为什么 div 会用 padding 变宽？答案

【问题标题】：If padding is inside, why will the div be wider with padding?如果 padding 在里面，为什么 div 会用 padding 变宽？
【发布时间】：2014-02-10 08:12:06
【问题描述】：

我在 CSS 上有这个 div：

#bodycontent {
    max-width:980px;
    margin:auto; 
}

#navleft {
    width:18%;   
    border:0px;
    float:left;
}

#rightcontent {
    max-width:80%;
    border:0px;
    float:right;
}

在 HTML 上：

<div id="bodycontent">
    <div id="navleft">
        some stuff
    </div>
    <div id="rightcontent">
        some stuff
    </div>
</div>

现在我有两个问题：

如果我将 div 设置为 20% 和 80%，我会让 div 不是并排显示，而是一个上一个下一个
我希望在 rightcontent div 上有 25px 的 padding-left，但是，如果我再次设置 padding，则 div 会低于另一个。

为什么？填充物不在里面？

【问题讨论】：

这是因为盒子模型。 w3.org/TR/CSS2/box.html

标签： html css padding

【解决方案1】：

width 属性是defined (in CSS 2) 作为内容的宽度，而不是边框之间的空间。内边距在边框内，而不是在宽度内。

在 CSS 3 中，您可以使用 box-sizing property 更改此设置，但此设置为 limited support。

【讨论】：

你建议在 div 之间创建空间吗？减少宽度的百分比并添加一些填充？如果浏览器或屏幕分辨率发生变化，这不危险吗？
为了支持 CSS 2 浏览器，我会使用不带边距/填充的给定来设置列，然后在每个列中放置另一个具有所需填充的 div。

【解决方案2】：

您面临的问题是由于盒子模型。您声明的宽度是内容的宽度，而不是元素的真实宽度。

了解更多关于box model

要更改此设置，使边框和填充都是元素宽度的一部分，您可以使用border-box

#your-element { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: 
     border-box; box-sizing: border-box; 
}

【讨论】：

【解决方案3】：

阅读css box model。

您的内容是最里面的框，它将具有您指定的width。内边距、边框和边距都添加到此宽度。内边距将在边框内，但不在内容宽度内。

【讨论】：