margin-top的问题。

来源：互联网发布：消费类股票知乎编辑：程序博客网时间：2024/05/18 01:12

一个div内嵌套一个div，如果给内部div设置margin-top，理论上，外部div位置不变，内部div相对向下移动。（但有个前提是，外部的div未设置border和padding）

未设置margin-top的情况：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>margin-top的问题</title>    <style type="text/css">        *{            margin:0px;            padding: 0px;        }        .outside{            width:200px;            height:200px;            background-color: blue;        }        .inside{            /*margin-top:20px;*/            width:100px;            height:100px;            background-color: #000;        }    </style></head><body>   <div class="outside">       <div class="inside">       </div>   </div></body></html>

代码效果图
现在把magrin-top的注释取消：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>margin-top的问题</title>    <style type="text/css">        *{            margin:0px;            padding: 0px;        }        .outside{            width:200px;            height:200px;            background-color: blue;        }        .inside{            margin-top:20px;            width:100px;            height:100px;            background-color: #000;        }    </style></head><body>   <div class="outside">       <div class="inside">       </div>   </div></body></html>

效果图
理论上应该是下面这种情况：
这里写图片描述
这个问题我在5大主浏览器上试过，发现均出现这种情况：然后上网查询，找到了一段对这个描述最清楚的解释。

父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。

解决办法如下：

 1.给外部div设置border-bottom:0.1px solid #000; 2.或者设置padding-bottom:0.1px; 3.给设置maigin-top的div设置overflow:hidden.

阅读全文

0 0