Question

我的问题：

CSS必须在某个div上包含30个额外像素才能使其均匀，我想知道原因。另外，我宁愿使用其他两个div而不是x+30来表示偶数。

我的解决方案：

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

这是我正在谈论的三个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添加了填充。

因为在其他15px的两侧都有div的填充。这就是您必须添加30px。

的原因

只需将其添加到您的sidebar-bottom：

即可

padding: 0px 15px;

Answer 2

对于上面的两个DIV，你定义了宽度为290px，并且你在每边都放置了15px的填充，box模型将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 :)*/
}

为什么CSS div必须是30个额外的像素才能与其他人一样？

3 个答案: