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

Question

我在 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>

现在我有两个问题：

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

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

Answer 1

该width属性（在 CSS 2 中）定义为内容的宽度，而不是边框​​之间的空间。填充在边界内，而不是在宽度内。

在 CSS 3 中，您可以使用box-sizing属性更改它，但它的支持有限。

Answer 2

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

了解有关盒子模型的更多信息

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

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

Answer 3

阅读有关css 盒模型的信息。

你的内容是最里面的盒子，它会有width你指定的。填充、边框和边距都添加到此宽度。填充将在边框内，但不在内容宽度内。