当wrapper div没有边框时，这个float div如何获得顶部边距？ [英] How this float div is getting top margin when wrapper div has no border?

问题描述

请注意，我并非要求修正问题，而是要了解当wrapper div具有0像素边框时，div是如何浮动的。但是当wrapper div有1px的边框设置时，float div不会得到margin，但是在这两种情况下，secondDiv按照预期得到top margin。

请注意，我理解margin margin但是它与设置边框有什么关系？

 < div id =container> 
< div id =firstDiv> FIRST内部CONTAINER< / div> 
< div id =secondDiv> SECOND Div CONTAINER内部的div 


< / div>


body {
width：780px;
margin：00px auto;
}
#container {
border：1px solid orange; / *但是当它设置为0px时，则浮动的div也会获得余量* /
}
#firstDiv {
float：left;
}
#secondDiv {
margin：14px;
}


http://jsfiddle.net/dmpxw/

现在，如果wrapper div的border设置为0px，向下。

http://jsfiddle.net/dmpxw/1/

解决方案

这是一个有趣的。

当容器具有边框时，第二个内部div的边框从边框开始 - 即边框向上应用边框。这是因为边框是在余量测量之前应用的最后一个项目。

当容器没有边框时，第二个内部div的边距从最后一项，这是现在的身体。所以边距现在是容器的OUTSIDE，所以容器现在实际上进一步向下的页面 - 第一个内部div没有边距，并且正好在容器的顶部 - 它是在第二个移动的容器本身

如果您向示例中添加背景颜色，您可以看到，当您有边框时，边框位于容器内，当您没有边框时边距在容器外。 查看JSFiddle的示例。

Please note that I am not asking about correcting the problem but instead I want to know how floated div is getting margin when wrapper div has 0px border set. But when wrapper div has 1px border set then floated div doesn't get margin but in both cases secondDiv gets top margin as intended.

Please note that I understand margin collapsing topic but what it has to do with setting border?

<div id="container">    
    <div id="firstDiv">FIRST Div inside CONTAINER</div>
    <div id="secondDiv">SECOND Div inside CONTAINER</div>
</div>


body{
    width: 780px;
    margin: 00px auto;
}
#container {
    border: 1px solid orange;   /* but when its set to 0px then floated div gets margin too*/
}
#firstDiv{         
    float:left;
}
#secondDiv{  
     margin: 14px;        
}

http://jsfiddle.net/dmpxw/

Now, if border of wrapper div is set to 0px then floated is pushed downward too. But I think shouldn't it stay there like in previous case?

http://jsfiddle.net/dmpxw/1/

解决方案

This is an interesting one.

When the container has a border, the margin of the second inner div runs from the border - i.e. the margin applies from the border onwards. This is because the border is the last item that applies before the margin measurement.

When the container does not have a border, the margin of the second inner div runs from the last item, which is now the body. So the margin is now OUTSIDE of the container, so the container is now actually further down the page - the first inner div has no margin, and is right at the top of the container - it is the container itself that has moved in the second case.

If you add a background color to your example, you can see that when you have a border the margin is inside the container, and when you have no border the margin is outside the container. View the example on JSFiddle.

这篇关于当wrapper div没有边框时，这个float div如何获得顶部边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！