近期在重温《CSS权威指南》,还是想把基础再打坚固点,如今对垂直外边距的合并问题进行简单总结。

1. 两个块级元素的外边距都大于0时,取那个最大值作为两个块级元素的垂直边距

请看以下一个小样例,效果图例如以下:红色的块margin-bottom为30px; 黄色的块的margin-top: 20px;最后的垂直的边距是为30px;

2. 当两个块级元素的外边距都小于0时,取绝值最大的那个作为两者之间的垂直边距。

请看以下一个小样例,效果图例如以下:红色的块margin-bottom为-10px; 黄色的块的margin-top: -30px;最后两者的垂直边距是为-30px;注意:这个时候两个块会发生重叠,由于浏览器总会按从前到后的顺序显示元素,所以后出现的会覆盖较早出现的元素。

3. 当两个块级元素的外边距是一正一负时,用正的值减云负值的绝对值。

请看以下一个小样例,效果图例如以下:红色的块margin-bottom为-20px; 黄色的块的margin-top: 30px;最后两者的垂直边距是为:30 - |-20| = 10px;




【css基础】垂直外边距的合并的更多相关文章

  1. CSS 垂直外边距合并:规范、延伸、原理、解决办法

    <CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...

  2. CSS min-height不能解决垂直外边距合并问题

    垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...

  3. css盒子模型、垂直外边距合并

    css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...

  4. 文本溢出、垂直外边距合并、BFC、hasLayout

    今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overf ...

  5. Margin的垂直外边距问题

    做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div ...

  6. margin属性以及垂直外边距重叠问题

       盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...

  7. __x__(22)0907第四天__ 垂直外边距重叠

    外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...

  8. __x__(43)0910第六天__ clearfix 解决:垂直外边距重叠,高度塌陷

    <div class="box1"> <tabl></table> <div class="box2">< ...

  9. CSS Margin(外边距)

    CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...

随机推荐

  1. 异常:未能载入文件或程序集”DAL”或它的某一个依赖项——解决的方法

    以下是我再使用抽象工厂+反射重构机房时,在Factoy中出现了以下一个问题: 去网上查了一下资料,发现这是一个非常普遍的问题,它出现的原因主要有两种: 第一种: 载入DLL路径错误.解决的方法是调整D ...

  2. VC实现URL编解码器

    //变化UTF8为了中国 void UTF8ToGB(CString& szstr) { WCHAR* strSrc; TCHAR* szRes; int i = MultiByteToWid ...

  3. SQL SERVER递归查询

    SQL SERVER 进行递归查询 有如下数据表

  4. VB.net总结

    .NET视频差点儿相同用时一周结束,总体感觉就是"走耳不走脑".刚開始看视频理解起来有一点困难,台湾口音以及台湾与大陆计算机术语的差异,让我把前几集相当于直接忽略过了(建议打算看这 ...

  5. crm查询记录共享给了哪些人

    有时候,我们须要查询一个记录.共享给了哪些人?怎么做? 第一种做法:是sql的方式 select * from PrincipalObjectAccess where objectid = '5226 ...

  6. 在Ubuntu下编译Assimp库

    在Ubuntu下编译Assimp库 怎样在Ubuntu下编译Assimp库?这是我曾经编译成功后做的笔记,供參考. 1.去以下的站点去下载Assimp库: http://assimp.sourcefo ...

  7. CentOS6 yum源支持更多rpm包的升级(使用第三方软件库EPEL、RPMForge与RPMFusion)

    转载于http://blog.csdn.net/erazy0/article/details/6878153 在CentOS下运行yum install flash-plugin或yum instal ...

  8. java之redis篇(spring-data-redis整合) (转)

    redis的知识:官网 1,利用spring-data-redis整合 项目使用的pom.xml: <project xmlns="http://maven.apache.org/PO ...

  9. Hadoop基于文件的数据结构及实例

    基于文件的数据结构 两种文件格式: 1.SequenceFile 2.MapFile SequenceFile 1.SequenceFile文件是Hadoop用来存储二进制形式的<key,val ...

  10. Apple iOS MDM开发流程

    一年前曾参与过中石油的一个移动平台项目,实现了通过MDM对iOS设备进行管理.由于苹果对于mdm这块的接口及开发流程只向几个合作伙伴进行了分享,并没有对具体实现的文档进行公开,所以这方面的资料非常少. ...