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两个 ...
随机推荐
- 创建一个MVC解决方案,添加一个控制器后,运行程序报错:”/"未找到服务器
1.创建一个MVC项目,如图
- 文件头 MAGE_FILE_HEADER
IMAGE_FILE_HEADER这个结构的定义如下: typedef struct _IMAGE_FILE_HEADER { 00h WORD Machine; //运行平台 02h WORD Nu ...
- MMDrawerController 使用遇到的问题及定制
MMDrawerController 1,集成UIViewController * leftDrawer = [[UIViewController alloc] init]; UIViewContro ...
- Nmap Snote
Title:Nmap Snote --2011-11-15 21:28 用Nmap上瘾了,怕以后忘记,也就记一下. Nmap -v -sS -n -p1-65535 IP Nmap -v -sS -p ...
- Java DES 测试
package com.des.test; import java.io.UnsupportedEncodingException; import java.security.InvalidKeyEx ...
- Altium Designer 6 快速进行差分对走线
1: 在原理图中让一对网络前缀相同,后缀分别为_N 和_P,并且加上差分队对指示.在原理图中,让一对网络名称的前缀名相同,后缀分别为_N 和_P,左键点击Place DirectivesDiffere ...
- I2C的读写操作实验
[实验任务] 利用24C08断电以后存储的数据不消失的特点,可以做一个断电保护装置.首先利用单片机做一个0-99秒的自动计时器.然后随机关断电源,在 通电以后计时器接着断电前的状态继续计时. [实 ...
- GitHub的使用详解!Windows GitHub ,Sublime Git GitGutter的使用!
Github是什么? 它是代码管理工具. 在公司写的代码,不需要U盘拷贝回家,不需要放到网盘中.只需要上传到git上,就可以回家继续拷贝下来了. 比起svn要好, svn只适合局域网工作,离开局域网, ...
- java调优随记-java对象大小
在java中,基本数据类型的大小是固定.但是java对象的大小是不固定的,需要通过计算. 在java中,一个空对象(没有属性和方法的对象)在堆中占用8byte,比如 Object obj = new ...
- Qt入门(1)——初识Qt
Qt是一个跨平台C++图形用户界面应用程序开发框架.它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器.Qt是面向对象的框架,使用特殊的代码生成扩展(称为元对象编译器(Meta ...