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两个 ...
随机推荐
- Oracle database启动过程分析
实例跟数据库的区别 实例(instance)是内存中的一块区域和一组后台进程的集合.它的作用是维护数据库文件的.而数据库(database)则是指存放数据的数据库文件.它是一系列格式化的数据的集合.它 ...
- eclipse中myBatis引入
1.添加config.xml配置文件 2.定义与数据库的数据实体映射类 3.创建操作表的是sql映射文件 即:mapper.xml 4.在配置文件config.xml中注册sql映射文件(步骤三创建的 ...
- strnclmp和strlen函数的用法
一.strncmp 函数 函数原型: 1.函数原型:int strncmp (const char *s1, const char *s2, size_t n) 2.头文件: <string. ...
- java构造方法的不同
分为有参数和无参数,还有THIS的使用方法,可用于传递给类,也可用于调用其它构造方法. public class Book { private String name; public Book(){ ...
- Java 多线程之龟兔赛跑(文件夹——读取文件——时间)
版权声明:本文为博主原创文章,未经博主允许不得转载. 描述: 乌龟和兔子(各自是一个Java线程)在我们的电脑上赛跑,我们为它们指定一个跑道(本地文件系统上的一个目录,该目录包含子目录).跑的规则是读 ...
- iOS开发手记 - iOS9.3 Xcode7打包ipa文件在其他越狱机器上运行的方法和一些问题
现在Xcode7可以用一个appleid就可以往手机上部署测试app,不再需要$99,这也是方便.但是要把app发给别人的手机上运行还是不行,除非别人的手机在你身边可以直接通过Xcode安装 关于怎么 ...
- HDOJ(HDU) 1491 Octorber 21st
Problem Description HDU's 50th birthday, on Octorber 21st, is coming. What an exciting day!! As a st ...
- 基准测试之netperf
使用 server端 [root@jiangyi01.sqa.zmf /home/ahao.mah/ALIOS_QA/tools/netperf] #netserver -p 10001 Starti ...
- activity theme parent 属性浅析
在AndroidManifest.xml文件中,可以对每一个Activity设置android:themetheme的设置 可以设置为系统自带的格式,也可以自定义格式. A: 系统自带格式 1.and ...
- 自定义枚举类型的常用操作-附源码(xjl456852原创)
自定义枚举类型中,假如我们有name和desc这样的属性,并在这个基础上定义了多个对象. 那么就可能用到通过name获取desc,或者通过desc获取name.通过name或者desc获取对应的枚举对 ...