Question

我需要帮助解释为什么边距应用于wrapperdiv中的底部两个框而不是顶部的大框。实施例

HTML：

<div id = "mainWrapperdiv"> 
    <div id = "maindiv">  
        <div id = "moveablediv" >
            <div id = "centerPointdiv"></div>
        </div>  
    </div> 
    <div id = "animationsdiv" class = "controls"></div>
    <div id = "optionsdiv" class = "controls"></div>
</div>

的CSS：

*
{
    padding:        0px;
    margin:         0px;
}

div
{
    border:         1px solid;
}   

#mainWrapperdiv
{ 
    width:          1000px; 
    display:        block;
    margin-left:    auto;
    margin-right:   auto;
}     

/**** CSS approach to forcing the main containter div to include it's floated elements *****/   
#mainWrapperdiv:after
{
    content:            ".";
    display:            block; 
    clear:              both; 
    height:             0px; 
    visibility:         hidden;
}   
/***** end main containter div including floated elements **********************************/ 

#maindiv
{  
    width:          850px;  
    height:         500px;  
    border:         5px solid; 
    margin:         30px 0px 30px 70px; 
    float:          left;
} 

div.controls 
{ 
    width:          400px; 
    height:         200px; 
    border:         5px solid;    
    margin:         20px 20px 10px 70px;
    float:          left;
}

当顶部大框忽略左右边距时，应用底部框的边距是什么？

Answer 1

你有一个

border: 5px solid;

编辑：

你的#maindiv有一个浮动。试着清除它：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

<div id = "mainWrapperdiv"> 
    <div id = "maindiv" class="clearfix">  
        <div id = "moveablediv" >
            <div id = "centerPointdiv">Center Point div</div>
        </div>  
    </div> 
    <div id = "animationsdiv" class = "controls">Animations div</div>
    <div id = "optionsdiv" class = "controls">Options div</div>
</div>

并尝试在div中添加一些内容以供测试。

在div.control（底部的2个div）中设置边距：

div.controls 
{ 
    width:          400px; 
    height:         200px; 
    border:         5px solid;    
    margin:         20px 20px 10px 70px;
    float:          left;
}

为什么一些div的利润？

1 个答案: