CSS Margin 坍塌
来源:互联网 发布:戴尔服务u盘安装centos 编辑:程序博客网 时间:2024/04/28 06:25
Margin坍塌
什么是 Margin 坍塌?
块与块之间的顶部外边距和底部外边距有时候会被合并成这两个外边距的值最大的那一个,称之为 Margin
坍塌
出现于哪些情况?
- 当两个竖直方向上的边距元素相遇的时候:
假设我们有一个颜色为#ff6b6b
的div
位于页面上,还有一个颜色为#4e97cd
的div
位于这个div
的下面,html
和CSS
代码分别如下:
HTML:
<div class="module__top"></div><div class="module__bottom"></div>
CSS:
.module { display: block; width: 100%; height: 150px;}.module__top { margin-bottom: 25px; background-color: #f38a6d;}.module__bottom { margin-top: 50px; background-color: #3bbfef;}
效果如下图所示:
根据我们的直观感觉,中间这个白色的部分的高度,应该是75px,然而运行结果却是50px,较大的margin吞掉了较小的margin。
那么当一个margin是正数,另外一个是负数的时候呢?比如:
.module__top { margin-bottom: -25px; background-color: #ff6b6b;}.module__bottom { margin-top: 50px; background-color: #4e97cd;}
最终的结果就是50 + (-25) = 25px
当两个值都是负数,比如-50px和-25px,那么最终的结果是-50px
- 父元素的
margin
遇见了它的第一/最后一个孩子的margin
CSS:
/* 父元素 */div { margin: 15px;}/* 下面都是孩子元素 */.red { background-color: #ff6b6b;}.orange { background-color: #ff9e2c;}.yellow { background-color: #eeee78;}.green { background-color: #4ecd9d;}.blue { background-color: #4e97cd;}.purple { background-color: #6c4ecd;}
HTML:
<div class="red"> <div class="orange"> <div class="yellow"> <div class="green"> <div class="blue"> <div class="purple">Collapsed</div> </div> </div> </div> </div></div><div class="padding red"> <div class="padding orange"> <div class="padding yellow"> <div class="padding green"> <div class="padding blue"> <div class="padding purple">Not Collapsed</div> </div> </div> </div> </div></div>
运行结果:
再一次,我们应该想当然认为所有元素的margin加起来应该等于父元素和孩子元素margin的总和。但是运行结果显示,孩子元素的margin将会被父元素的margin所覆盖,父元素看起来就像一个大Boss。
通过给父元素添加1px padding或者border-top,就可以解决这个问题。
如何解决 margin 坍塌问题?
一个方向上总是使用一种margin,不要混着用,比如竖直方向上总是只使用margin-bottom,比如水平方向上总是只使用margin-left。
参考
Mastering margin collapsing
What You Should Know About Collapsing Margins
Single-direction margin declarations
欢迎关注
我的公众号:“代码人生”,coodelife
0 0
- CSS Margin 坍塌
- margin坍塌
- CSS解决父元素坍塌的问题
- css margin
- CSS--Margin
- [CSS]CSS属性 margin
- 有关CSS中高度坍塌问题的一些解决方法
- CSS学习笔记——外边距坍塌
- CSS position:fixed定位时 “高度坍塌” 问题的解决
- CSS的Margin用法
- CSS margin的含义
- css中margin省略
- [CSS]---margin-left例子
- CSS margin 属性
- CSS:margin属性备忘
- CSS: margin,padding详解
- CSS margin研究
- css padding margin初始化
- 《Flask Web开发》重点笔记
- U3D Anchors功能详解
- Poj 1904 King's Quest
- Day03
- Java基础知识(四)
- CSS Margin 坍塌
- FloatLabeledEditText实现另类输入框
- 拓扑结构相同子树练习
- PMP资料
- 报错?!-20170213-ssh: connect to host localhost port 22: Connection refused
- 系统调用与库函数的区别
- 464. Can I Win -Medium
- 动态规划(DP)之最长上升子序列问题
- ZJOI2012一试[数列]题解