Question

我只是尝试创建嵌套元素，但内部元素（子类别）总是更大，然后是父元素（类别）。

请看一下这个JSFiddle：

JSFiddle： http://jsfiddle.net/d7vhpcmt/

HTML：

<div id="content" class="clearfix">
    <section class="category boxed">
        <section class="box_1"><header class="trigger trigger_aktiv"><h2>Category</h2></header>
            <div class="content">
                <section class="box_1 boxed"><header class="trigger"><h2>Subcategory</h2></header>
                    <div class="content"></div>
                </section>
            </div>
        </section>  
    </section>
</div>

CSS：

.category {
    background-color: #f8f8f8;
    padding: 20px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 1600px;
    float: left;
    margin-right: 10px; }
    .category a {
        color: #262626; 
        text-decoration: none;
        border-bottom: 0;
        background-color: transparent;
        display: block;
        width: 100%; }
    .category h1 {
        font-size: 2.0em;
        margin: 0 0 0.5em 0;
        font-weight: 300;
        line-height: 1em;
        color: #262626;
        letter-spacing: -1px; }

.box_1 {
    background-color: #E9E9E9; 
    margin-top: 5px; 
    border: 1px solid #E2E2E2;
    display: block;
    width: 100%; }
    .box_1:hover {
        background-color: #eee; }
    .box_1 header {
        padding: 5px 0 0 50px; }
    .box_1 .content { 
        background-color: #f2f2f2;
        height:100%; 
        padding: 0.2em 0 0 0;  }
        .box_1 .content p { margin: 0.5em 0.8em; }
        .box_1 .content h3 { 
            font-size: 1.2em !important;
            margin-left: 0.3em; }   
        .box_1 .content .box_1 {
            margin: 5px; }

Answer 1

这是因为你给了.box_1宽度为100％和.content .box_1，边距为5px;这意味着你的盒子将是100％+ 10px - 而不是使用margin尝试添加填充到父容器，这样你就不需要为它的所有孩子增加5px的余量：

.box_1 .content {
    background-color: #f2f2f2;
    height:100%;
    padding: 0.2em 5px 0 5px;
}

Example

Answer 2

如果您不担心IE8，请在calc课程中使用box_1。

.box_1 {
background-color: #E9E9E9; 
margin-top: 5px; 
border: 1px solid #E2E2E2;
display: block;
width: calc(100% - 10px);
}

DEMO

Answer 3

问题在于这段代码：

.box_1 .content .box_1 {
    margin: 5px;
}

您正在整个包含子类别的部分应用margin。只需以这种方式编辑：

.box_1 .content .box_1 {
    margin: 5px 0;
}

为了左右移除边距。

这是JSFiddle。

嵌套的div-container比父元素大

3 个答案: