為什么CSS div必須是30個額外的像素才能與其他人一樣？

Question

我的問題：

CSS必須在某個div上包含30個額外像素才能使其均勻，我想知道原因。 此外，我寧願它是一個偶數與其他兩個div而不是x+30 。

我的解決方案

我只需在第三個div中添加30個像素，以便與其他div一起使用。

這是一個jsFiddle 。

這是我正在談論的三個CSS：

.sidebar-top {
    float: left;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    border: 1px solid #ccc;
    height: 32px;
    width: 290px;
    background: -webkit-linear-gradient(top, white 0%,#E8E8E8 100%);
    background: linear-gradient(to bottom, white 0%,#E8E8E8 100%);
    padding: 4px 15px;
}
.sidebar-middle {
    float: left;
    width: 290px;
    padding: 5px 15px 0 15px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    background: #fff;
}
.sidebar-bottom {
    background: #fff;
    float: left;
    height: 16px;
    width: 320px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 15px;
}

我的問題/ tl;博士：

為什么我需要在.sidebar-bottom中添加30個像素，以便與其他div一起使用？

Answer 1

簡而言之，這是因為在每個sidebar-top和sidebar-middle添加了填充物。

因為在其他div的兩側有一個15px的填充。 這就是你必須添加30px 。

只需將其添加到sidebar-bottom ：

padding: 0px 15px;

Answer 2

對於兩個上部DIV，您定義寬度為290px，並且在每側放置填充15px，框模型將290px視為元素的內部寬度..因此向左和向右添加15px，這使得元素320px不是290。第三個DIV是290px並且你沒有放任何填充...所以你需要將30px添加到290px。

這是Box模型問題之一，您必須校准填充，邊框以獲得所需的尺寸。

一個解決方案是添加填充到第三個DIV ..

.sidebar-bottom {
    background: #fff;
    float: left;
    height: 16px;
    width: 290px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

http://jsfiddle.net/mkhoudary/E2JCm/1/

Answer 3

.sidebar-top {
    width: 290px;
    padding: 4px 15px;
}

.sidebar-middle {
    width: 290px;
    padding: 5px 15px 0 15px;
}

    .sidebar-bottom {
        width: 320px;
        /*no padding for sidebar-bottom others having 
   width - 290px + 
   padding left 15px + 
   padding right 15px = totally 320px.To equate sidebar-bottom to match with other two divs you are giving width as 320px :)*/
}