子元素设置margin-top，父元素也受影响

红太狼 2022-08-06 01:15 228阅读 0赞

外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：

<!doctype html>  
<html>  
  
<head>  
    <title>子元素设置margin-top，父元素也受影响</title>  
</head>  
<style type="text/css">  
    \* \{  
        margin: 0px;  
        padding: 0px;  
    \}  
    .father \{  
        width: 500px;  
        height: 400px;  
        background: \#ccc;  
        cursor: pointer;  
        /\*padding-top: 1px;\*/  
        /\*border: 1px solid red;\*/  
        /\*overflow: hidden;\*/  
    \}  
    .son \{  
        width: 100px;  
        height: 100px;  
        margin-top: 200px;  
    \}  
</style>  
  
  
<body>  
    <div class="father">  
        <div class="son">  
            <img src="../float/gif.gif">  
        </div>  
  
    </div>  
  
</body>  
  
</html>

效果如下图：

![Center][]

解决办法是：

给父元素加个padding或border或overflow:hidden即上面代码里的注释部分

效果如下图：

![Center 1][]

这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。 对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

深入理解一下margin外边距：

margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。

1、如果margin只有一个值，表示上右下左的margin同为这个值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;

2、如果 margin 只有两个值，第一个值表示上下margin值，第二个值为左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果margin有三个值，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

4、如果margin有四个值，那这四个值分别对应上右下左这四个margin值。例如：margin:10px 20px 30px 40px;

在实际应用中，个人不推荐使用三个值的margin，一是容易记错，二是不容易日后修改，一开始如果写成margin:10px 20px 30px;日后需求改动为上10px，右30px，下30px，左20px，你不得不还是得把这个margin拆开为margin:10px 30px 30px 20px;费力且不讨好，不如一开始就老老实实的写成margin:10px 20px 30px 20px;来的实在，不要为了现在节省俩个字节而让日后再次开发的成本上升。

用Margin还是用Padding

何时应当使用margin：

需要在border外侧添加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：

需要在border内测添加空白时。

空白处需要背景（色）时。

上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

个人认为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

文章部分来自http://www.5icool.org/a/201105/a610.html

[Center]: /images/20220806/da77ec8793e64518834bfe64ab3ecd09.png
[Center 1]: /images/20220806/47df6cadc34e434d8c878167f1849172.png