html盒子距离上边距50px,CSS的margin属性问题解析

CSS的margin属性

写在前面

更新了很多篇JavaScript和vue的文章啦，今天久违和大家分享以下css的知识点。也是我以前在第一次面试的时候被面试官问倒的问题，希望可以帮助到各位小伙伴。在css中有一个margin属性相信大家都比较的熟悉，但有一些细节还是需要和大家分享学习的。

属性的定义及使用

作用：首先不管是在IE盒模型下还是w3c标准盒模型下都是在盒子的最外层，作用就是和其他的盒子之间“顶开”出来，让盒子之间存在距离。如下图所示：

属性：这个不需要多讲，就是简单的上右下左

但是简写还是需要和大家简单说明一下的

margin:10px 5px 15px 20px;：

上边距是 10px

右边距是 5px

下边距是 15px

左边距是 20px

margin:10px 5px 15px;

上边距是 10px

右边距和左边距是 5px

下边距是 15px

margin:10px 5px;

上边距和下边距是 10px

右边距和左边距是 5px

margin:10px;

所有四个边距都是 10px

外边距塌陷

接下来讲讲重点就是外边距的塌陷问题

原因：外边距塌陷也称为外边距合并，是指两个在正常流中相邻(兄弟或父子关系)的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。

例如：

Document

.a {

float: left;

width: 100px;

height: 100px;

background-color: bisque;

}

.b {

float: left;

width: 50px;

height: 50px;

background-color: blue;

margin-top: 20px;

}

456

结果如图：

很明显我们想要的结果并不是这样的，我们想要的是蓝盒子的距离他的父盒子有20px的距离，而我们却发现父盒子也一起掉了下来，这就是我们常说的外边距塌陷问题。

解决这个问题的方法：

(1)给父盒子加上上 边框，如果不想要看到边框可以把边框的像素设置成零也就是：

​ border:0px dash #fff

(2)给父盒子加上overflow:hidden让父盒子形成BFC也可以解决这个问题

.a {

width: 100px;

height: 100px;

background-color: bisque;

overflow: hidden;

}

.b {

width: 50px;

height: 50px;

background-color: blue;

margin-top: 20px;

}

可以看到这就是我们想要的效果了

还有一种情况就是：当父子都有margin值的时候，以margin值大的为主

例如：

Document

.a {

width: 100px;

height: 100px;

background-color: bisque;

margin-top: 50px;

}

.b {

width: 50px;

height: 50px;

background-color: blue;

margin-top: 100px;

}

456

此时的距离顶部的距离是100px，而不是50px

外边距重叠问题

上面讲的是父子盒子间的外边距问题，接下来讲讲兄弟盒子盒子间的重叠问题

在兄弟盒子之间的外边距上，垂直外边距会有问题但水平兄弟盒子不会有重叠问题

垂直兄弟盒子的计算方式是：

1.两个都是正数，取较大的值

2.两个都是负数，取绝对值较大的值

3.一正一负，取两个值得和

例如1：

.a {

width: 100px;

height: 100px;

background-color: bisque;

margin-bottom: 50px;

}

.b {

width: 50px;

height: 50px;

background-color: blue;

margin-top: 100px;

}

123

456

可以看到它们之间的距离并不是我们预想中的150px而是100px

例如2：

.a {

width: 100px;

height: 100px;

background-color: bisque;

margin-bottom: 150px;

}

.b {

width: 50px;

height: 50px;

background-color: blue;

margin-top: -100px;

}

可以看到它们之间的距离就成了50px

例子3：

.a {

float: left;

width: 100px;

height: 100px;

background-color: bisque;

margin-right: 150px;

}

.b {

float: left;

width: 50px;

height: 50px;

background-color: blue;

margin-left: 50px;

}

可以看到相邻的兄弟元素并不会受影响。

总结

在使用margin属性的时候要注意以下问题：

当为父子盒子时：子盒子在使用margin属性的时候会有外边距塌陷的情况，要使用overflow：hidden或者父元素加上边框解决。

当为兄弟组件的时：垂直兄弟组件会存在外边距重叠问题，要主要好它们之间的实际距离，解决办法可以是给其中一个设置想要的margin宽度即可；而相邻兄弟组件则不存在这种问题，可以放心的使用。