css外边距合并
来源:互联网 发布:unity3d帧动画 编辑:程序博客网 时间:2024/06/05 11:58
相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的外边距合并。
水平方向不存在此现象。
外边距合并产生条件:
(1).相邻的外边距之间没有非空内容、padding或者border。
(2).元素都处于文档流中,即非浮动和position属性值不为absolute和fixed的元素。
特别说明:如果元素是父子关系,子元素的padding和border并不能够消除合并现象。
合并可以存在于兄弟对象之间,也可以存在于父子对象之间,下面就分开介绍一下:
一.兄弟对象之间的外边距合并:
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> div{ width:100px; height:100px; } .top{ background-color:green; margin-bottom:20px; } .bottom{ background-color:red; margin-top:10px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>
bottom元素的上边距和top元素的下边距产生合并现象,也就是两个元素垂直间距是20px,而不是20px+10px=30px。可以看出两个外边距的值取较大者。再来看一段代码实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> div{ width:100px; height:100px; } .top{ background-color:green; margin-bottom:-20px; } .bottom{ background-color:red; margin-top:10px; position:relative; left:20px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>
如果外边距有正有负,那么就选取最大值正直和最小的负值相加,得出的即是两个两个边距合并的值。
再看一段实例代码:
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> div{ width:100px; height:100px; } .top{ background-color:green; margin-bottom:-20px; } .bottom{ background-color:red; margin-top:-10px; position:relative; left:20px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>
如果元素的外边距都是负数,那么取最小的负数作为外边距。
二.父子外边距合并:
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> #parent{ width:200px; height:200px; background-color:red; } #children{ width:60px; height:60px; background-color:green; margin:0px auto; margin-top:50px; } </style> </head> <body> <div id="parent"> <div id="children"></div> </div> </body> </html>
在以上代码中,出现了外边距和并现象,这时,子元素的外边距并不作用于父元素,而是作用于父元素之外的对象。父子外边距合并不但要满足在文章开始介绍的两条外边距合并条件,而且还要满足父元素中不能够有上下文布局属性,例如不能具有overflow(除visible)或者display:inline-block等属性。
特别说明:
以上介绍的外边距合并实例都是只涉及到两个元素,因为这在实际应用中是最常见的情况,但是外边距合并现象并非只局限于两个对象之间,只要满足外边距合并的条件就可以出现外边距合并现象,代码实例如下:
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.box { border:1px solid red; width:200px;}.ant { margin-bottom:50px; margin-top:50px;}</style> </head> <body> <div class="box"> <div class="ant"></div> </div> </body> </html>
由以上代码的运行结果可以看出,自身的外边距产生了合并现象,但是此div不能够具有高度和内容等等,因为这样上下外边距就不相邻了,外边距合并的条件就不具备了。
- CSS外边距合并
- css外边距合并
- CSS 外边距合并
- CSS外边距合并
- CSS 外边距合并
- CSS外边距合并
- CSS 外边距合并
- Css外边距合并
- CSS外边距合并
- CSS外边距合并
- CSS 外边距合并
- CSS外边距合并
- css外边距合并
- CSS 外边距合并
- css外边距合并
- CSS 外边距合并
- css外边距合并
- css 外边距合并问题
- 求链式表的表长
- CGFloat和float的区别,什么时候用哪一种以及浮点数比较大小
- 【JAVA】在网上看到的一些题目,在此做一些整理<此贴不定期更新>
- Tensors
- Linux命令
- css外边距合并
- 网络安全概述
- JDBC隔离级别
- Mybatis之typeAlias配置的3种方法
- SpringBoot输出日志
- session是什么?session的由来以及session的声明周期。
- Docker(一)
- linux下网络(ifcfg )配置
- 【wxWidgets】wxWidgets之窗口标识符二