也许你会遇到过设置margin的时候没有效果的问题。不要心急，也是你还不了解margin，下面为你分析和了解margin的特别以便你能更好的使用它，避免下次再错。
【有关设置margin外边距没有效果的问题——已解决】情况一：垂直并列关系
<
style>
.box1{
width: 100px;
height: 100px;
background-color:hotpink;
margin-bottom: 50px;
}
.box2{
width: 100px;
height: 100px;
background-color:indianred;
margin-top: 40px;
}<
/style>
<
/head>
<
body>
<
div class="box1"><
/div>
<
div class="box2"><
/div>
<
/body>
连个方块，分别是box1,box2，设置box1的样式为margin-bottom: 50px; 设置box2的样式为margin-top: 40px;
文章图片
结果两个方块之间只有50px，你是不是会想为啥不是90px，因为外边距margin是想外推开，就好像人的手，要碰到东西才能推开，两个人一起伸出手去推对方的身体部分，那两者之间的距离当然是手比较长那一个的距离。
情况二：嵌套关系
<
style>
.box1{
width: 200px;
height: 200px;
background-color:hotpink;
}
.box2{
width: 100px;
height: 100px;
background-color:indianred;
margin: 50px
}<
/style>
<
/head>
<
body>
<
div class="box1">
<
div class="box2"><
/div>
<
/div>
文章图片
为box2嵌套在box1里面，设置了margin=50px，只见父和子元素都向下移动了50px，而box2向左移动了50px。这种情况是因为父元素和子元素都叠在一起了。可以在父元素添加padding的方法解决。
.box1{
width: 200px;
height: 200px;
background-color:hotpink;
padding-top: 50px
}
.box2{
width: 100px;
height: 100px;
background-color:indianred;
}
文章图片
推荐阅读
- vue.js框架过渡动画实现教程+案例
- js如何获取页面get请求url路径的参数（）
- 什么是JS原型（JavaScript原型和原型链最简单的解释）
- JavaScript是多线程的！从JS的事件循环、队列和执行栈理解JS的异步运行机制
- vue使用路由router-link实现导航栏功能
- vue中router-link属性的解析和用法
- JavaScript如何解决报错 Uncaught TypeError Cannot read property ‘addEventListener’ of null（）
- 如何查看win7d的ip地址（）
- CSS 边框图片用法示例