网页设计：Css大坑之一，设置margin无效

出现这个问题基本和垂直外边距的特性有关。注意是垂直外边距margin-top/bottom啊，不是水平外边距。

垂直外边距特性：

1.兄弟盒子的垂直外边距会重合，取兄弟元素设置的margin属性最大值。比如上面的盒子设置margin-bottom:200px，下面盒子设置margin-top:100px，那最终两个盒子隔开距离是200px。

2.父子盒子的垂直外边距会传递，在一定的条件下，由子元素margin-top属性会单方向传递给父元素的margin-top属性。

下面会进行实验，看看margin具体是怎么无效的。看一下实验场景：

body里面有4个大盒子，其中box1有一个子盒子box1-1；box1/2/3/4互相之间是属于兄弟元素。box1和box1-1之间属于父子元素。

渲染出的页面： 然后我们想把橙色盒子和紫色盒子隔开一些。于是对紫色盒子设置margin-top：200px属性。

设置以后，确实紫色盒子和橙色盒子隔开了200px；

但当我们设置橙色盒子margin-bottom:100px;后，发现橙色和紫色盒子垂直距离没有变化，也就是发生了无效的情况。按文章开头提到的特性，此时只有紫色盒子的margin-top:200px;生效。

解决方案：无需解决，只需要记住规律就可以。实在有强迫症可以把无效的属性删除，比如上面的删除橙色盒子的margin-bottom:100px;

简单说一下父子盒子的关系。父子盒子也叫父子元素，盒子也就是div是html元素的一种，我比较喜欢把单纯的div标签元素称为盒子。然后一个A盒子里面放一个盒子B，那A就是B的爹。

实验场景中，我在橙色盒子里放一个蓝色盒子。现在我想把蓝色盒子在橙色盒子里往下移一点，也就是这样： 于是乎首先想到的是设置蓝色盒子margin-top:50px;

但实际是橙色盒子往下移动了50px，蓝色盒子在橙色盒子内没有移动，margin-top不生效。

解决方法：

1.给父盒子加一个边框属性border-style:solid; 然后把边框颜色变透明：border-color:rgba(0,0,0,0); 但有副作用，那就是父子盒子之间会隔开距离，距离为边框的默认宽度3px（因为我没有设置边框宽度，所以是3px），如图所示（仔细看，蓝色和橙色之间有微小缝隙）： 当然你也可以只设置border-top-style，这不会影响水平。但橙色盒子同样会受到边框的影响，被拉长了3px，当然这在逻辑上很好解决，把高度减少相应的数值就可以。甚至如果你的网页不需要很严谨的显示效果，这个方法值得采用的，在逻辑上容易理解，而且把布局改动局限在一小块地方。因为Css理念就是通过摆放div来调整网页结构，就像实体的物理建筑一样。说到这个，你甚至可以再拿一个50px高的盒子像一个柱子一样放在蓝色盒子和橙色盒子之间，撑开他们的距离，但橙色盒子高度也要相应减少50px。

2.不对子盒子使用margin-top属性，对父盒子使用padding-top属性。这个方法同样有副作用，那就是橙色盒子高度被多撑开了50px，是从padding-top的50px那来的。如图所示：

padding-top多出来的50px，在父盒子高度height属性那减去50px抵消就可以。

以上两种方法都是从结构来使得蓝色盒子在橙色盒子里往下移动，下面说说其他方法是怎么做的

3.相对定位。

先设置成相对定位：position:relative;然后在子盒子的Css样式中加入：top:50px; 即可让蓝色盒子在橙色盒子中往下50px，蓝色盒子相对于它原来的位置往下移动50px。关于相对定位本文就不展开讲了，感兴趣的可以百度仔细了解相对定位是如何使用的。

4.可以设置浮动，此时设置margin有效且不会被继承，但会牵扯到浮动的问题。

总结：这4种方法是比较常用的。在本例中，使用相对定位最简单快捷，牵扯结构较少。还有其他方式，就不展开了。

截图，删代码换情况，组织语言，写了好久。。。如果这篇文档帮到您，可以点赞支持一下作者，非常感谢(_)