如果内部有填充，为什么div会更宽?

I have this div on the CSS:

我在CSS中有这个div:

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

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

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

and on the HTML:

和HTML:

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

Now I have 2 problems:

现在我有两个问题:

If I set the divs 20% and 80% I'll have the divs displayed not side by side but one above and one below
如果我将divs设置为20%和80%，我将使divs不是并排显示，而是一个在上面，一个在下面
I'd like to have 25px of padding-left on the rightcontent div but, again if I set the padding, the div goes below the other.
我想要在右边的div中保留25px，但是如果我设置了填充，div会在另一个的下面。

Why? The padding is not inside?

为什么?衬垫不在里面?

3 个解决方案

#1

The width property is defined (in CSS 2) as the width of the content, not the space between the borders. Padding goes inside the borders, not inside the width.

宽度属性(在CSS 2中)定义为内容的宽度，而不是边界之间的空间。填充在边框内，而不是宽度内。

In CSS 3, you can change this with the box-sizing property but this has limited support.

在CSS 3中，可以使用box-sizing尺寸属性对此进行修改，但是这一特性的支持是有限的。

#2

The problem you are facing is because of the box model. The width you declare is the width of the content and not the true width of the element.

你所面临的问题是因为盒子模型。声明的宽度是内容的宽度，而不是元素的真正宽度。

To learn more about the box model

了解更多关于盒子模型

To change this so that the border and padding are all part of the elements width you can use border-box

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

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

#3

Read about the css box model.

阅读css框模型。

Your content is the inner-most box, and it will have the width you specify. Padding, border, and margin are all added to this width. Padding will be inside the border, but not inside the content width.

您的内容是最内部的框，它将具有您指定的宽度。填充、边框和边距都添加到这个宽度中。填充将在边框内，而不是内容宽度内。

#1