Question

在带有doctype 的HTML 5中，我有内部正文：

<div style="width:100%; background-color: #cccccc;">
    <div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
    Main
</div>

http://jsfiddle.net/F3kXw/

当我在firefox中渲染时，我得到外部div的页边距为20px，我只需要sub div从外部div获得20px的余量。如果我将字符放在子div之上，如：

，它就可以工作

<div style="width:100%; background-color: #cccccc;">
    Main
    <div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
    Main
</div>

e.g。 http://jsfiddle.net/F3kXw/2/

对我来说没有任何意义，我过去从未遇到过这个问题。

Answer 1

尝试此代码可能会有所帮助

<div class="website_sub_frame" style="width:100%; background-color: #cccccc;overflow:hidden">

    <div style="clear:both; margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
    Main
</div>

Answer 2

而不是使用margin top为什么不在你的sub div上面添加另一个div并给它一个20px的高度。例如： div class =“website_sub_frame”style =“width：100％; background-color：#cccccc;” div style =“height：30px”＆gt; Sub / div 主要 /格

Answer 3

尝试将margin-bottom代替margin-top给予子div。就是这样。

<div class="website_sub_frame" style="width:100%; background-color: #cccccc;">
    <div style="width:100px; background-color: #aa0000; margin-bottom:20px;">Sub</div>
    Main
</div>

这是一个有效的demo

或者您正在寻找这个？

<div class="website_sub_frame" style="width:100%; background-color: #cccccc;">
    Main
    <div style="width:100px; background-color: #aa0000; margin-top:20px;">Sub</div>
</div>

这是一个有效的demo

希望它可以帮到你！

Answer 4

让父DIV浮动。不完全确定为什么要修复它，但它确实有效。

 <div style="float:left; width:100%; background-color: #cccccc;">
   <div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
   Main
</div>

CSS子元素“margin-top”属性会影响父元素

4 个答案: