为什么填充会影响元素的宽度？答案

【问题标题】：why is padding affects a element's width?为什么填充会影响元素的宽度？
【发布时间】：2014-11-25 16:55:48
【问题描述】：

<style type="text/css">
div{height:400px}
#container{width:100%}
#left10{width:10%;float:left;background:red}
#rest90{width:90%;float:left;background:yellow}
</style>
<div id="container">
    <div id="left10"></div>
    <div id="rest90"></div>
</div>

如您所见，我的页面上有 2 个 DIV，为了响应的缘故，我只按百分比为 2 个 DIV 分配宽度。现在我希望#rest90 DIV 中的内容与其左边框有 20 像素的距离。但是当我将#rest90 的 padding-left 设置为 20px 时，DIV 将被移位。小提琴：http://jsfiddle.net/xvnj9oem/

我一直认为 padding 在元素内部，因此不应该影响元素与其他元素的相对位置。但显然我错了，至少在这种情况下是这样。有什么我错过的吗？我是否必须为 #rest90 中的每个元素设置 margin-left 才能实现我的目标？

【问题讨论】：

对于标准盒子模型，width 指定元素内容可用的空间（它的“内部宽度”），除此之外还有padding。要对此进行调整，请参阅Preventing padding propety from changing width or height in CSS
看看这个：css-tricks.com/box-sizing

标签： css

【解决方案1】：

简单的添加到你的 div（或你需要的标签）

 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */

看看这个：CSS BOX SIZING

div{
 height:400px; 
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
#container{width:100%}
#left10{width:10%;float:left;background:red}
#rest90{width:90%;float:left;background:yellow; /*just to test padding*/ padding:20px }

<div id="container">
    <div id="left10"></div>
    <div id="rest90"></div>
</div>

【讨论】：

【解决方案2】：

这是你想要做的吗？

div {
    height:400px
}
#container {
    width:100%
}
#left10 {
    width:10%;
    float:left;
    background:red;
    left:0px;
    position:absolute;
}
#rest90 {
    padding-left:1px;
    width:90%;
    float:left;
    background:yellow;
    left:10%;
    position:absolute;
}

JSFiddle

【讨论】：

【解决方案3】：

那是因为你没有使用box-sizing

div{height:400px;box-sizing:border-box}
#container{width:100%}
#left10{width:10%;float:left;background:red}
#rest90{width:90%;float:left;background:yellow}

<div id="container">
    <div id="left10"></div>
    <div id="rest90"></div>
</div>

【讨论】：

【解决方案4】：

你应该看看CSS Box Model。

因为它工作正常：

#container{
    width: 100%;
}

#left10{
    width: 10%;
    float: left;
    background: red;
}

/** For width */
#rest90 {
    width: 90%;
    float: left;
}

/** For padding, margin and border */
/** The width of this container must be auto (default value) */
#rest90 > div {
    padding-left: 1px;
    background: yellow;
}

<div id="container">
    <div id="left10"></div>
    <div id="rest90"><div></div></div>
</div>

【讨论】：