CSS的margin塌陷
一、两个div并列,上面div的margin-bottom和下面div的margin-top会塌陷,也就说会取上面div的margin-bottom和下面div的margin-top的最大值作为两个并列div中间的margin显示值。
解决方法:两个div并列,只设置其中一个块上或下margin的一处即可。
二、父块div内含子块div,且父div没有border-top、padding-top或overflow:hidden这些css属性,这时父、子div的margin-top值会取两个div的最大margin-top值。
解决方法:
给父div设置
1、border:1pxsolidtransparent
2、padding-top;
3、over-flow:hidden;
可参考:
http://blog.chinaunix.net/uid-22414998-id-3138656.html
http://blog.csdn.net/dclchj/article/details/9787481
CSS的margin塌陷的更多相关文章
- CSS的margin塌陷(collapse)
<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...
- 问题与对策:CSS的margin塌陷(collapse)
1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: & ...
- WEB学习-CSS中Margin塌陷
margin的塌陷现象 标准文档流中,竖直方向的margin不叠加,以较大的为准. 如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的: 盒子居中margin:0 auto; marg ...
- CSS基础 margin塌陷问题以及解决 办法
场景:两个相互嵌套的块级元素,父子元素相互紧贴margin-top会合并作用在父元素的子元素结果:导致两个盒子同时移动 解决方法: 1.给父元素设置overflow:hidden 2.给父元素设置浮动 ...
- css margin塌陷问题
一.同级块级元素塌陷 html <h2> 同级块级元素塌陷 </h2> <div class="block1"> block1 </div ...
- 林大妈的CSS知识清单(二)可见格式化模型(内含margin塌陷与浮动闭合的解决方案)
盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...
- “margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
- margin塌陷与margin合并(margin),清除浮动
**1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...
- Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题
一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...
随机推荐
- Python实现类似switch...case功能
最近在使用Python单元测试框架构思自动化测试,在不段的重构与修改中,发现了大量的if...else之类的语法,有没有什么好的方式使Python具有C/C#/JAVA等的switch功能呢? 在不断 ...
- 【学习笔记】【oc】copy与mutableCopy
copy 返回一个不可变的对象: mutableCopy 返回一个可变的对象: 使用copy方法时 类必须实现:<NSCopying>协议中的-(id)copyWithZone:(NSZo ...
- Qt 错误汇集贴
错误: D:\qtprojects\mycom\mycom\mainwindow.cpp:23: error: no matching function for call to 'MainWindow ...
- 如何升级nodejs版本
直接下载最新版安装即可,例如我本地的nodejs版本为: y@y:untitled$ node -v v0.10.33 当前node官网最新版本为:Current Version: v0.12.2 下 ...
- 使用ntfs的磁盘映射功能
当年95极受欢迎,是作为一个还算真正的32位系统.之前的3.1都是16位为基础的,很多api支持有限.相应的对于硬件性能的发掘还是值得肯定的 98对于95的取代是成功的,我想重要原因是图形尤其是游戏的 ...
- UML建模之时序图
现在是二月,而且到如今你或许已经读到.或听到人们谈论UML 2.0 —— 包括若干进步的 UML 的新规范,所做的变化.考虑到新规范的重要性,我们也正在修改这个文章系列的基础,把我们的注意力从 OMG ...
- delphi7调用java写的webservice,在调用的时候弹出“wssecurityhandler:request does not contain required security header”
delphi7调用java编写的webservice问题我用delphi7调用java写的webservice,在调用的时候弹出“wssecurityhandler:request does not ...
- HBase 事务和并发控制机制原理
作为一款优秀的非内存数据库,HBase和传统数据库一样提供了事务的概念,只是HBase的事务是行级事务,可以保证行级数据的原子性.一致性.隔离性以及持久性,即通常所说的ACID特性.为了实现事务特性, ...
- java中 SSL认证和keystore使用
java中 SSL认证和keystore使用 2013-10-12 11:08 10488人阅读 评论(0) 收藏 举报 目录(?)[+] 好久没用过SSL认证了,东西久不用,就有点生疏. ...
- iOS面试题大全-点亮你iOS技能树
所有的内容大部分来自于网络的搜集,所以我不是一个创造者,而是一个搬运工.我尽量把题目,尤其是参考答案的出处列明.若有任何疑问,建议,意见,请联系我. 第一部分面试题来源于iOS-Developer-I ...