div嵌套内层div的margin-top转移给外层div的解决办法
在web开发过程中,有些情况下给内层div设置的margin却被莫名奇妙的转移给了外层div。百度之后,发现它竟然是css2.1中盒模型中规定的内容:
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。
解决办法:
1.给父元素添加 overflow:hidden; 属性。
2.或者给父元素添加 padding-top 属性,属性值为要设定的margin 值。
div嵌套内层div的margin-top转移给外层div的解决办法的更多相关文章
- 嵌套div中margin-top转移问题的解决办法
在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCT ...
- div嵌套引起的内层margin-top对外层div起作用
嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...
- HTML中div嵌套div的margin不起作用
下面介绍一下div嵌套div时margin不起作用的解决方案. 顺便科普下margin的定义和用法. div嵌套的HTML代码: <!DOCTYPE html> <html lang ...
- div嵌套导致子区域margin-top失效不起作用的解决方法
有两个嵌套关系的div,如果外层div的父元素padding值为0, 那么内层div的margin-top或者margin-bottom的值会"转移"给外层div,使父元素产生上外 ...
- div嵌套引起的margin-top不起作用(转)
嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...
- IE中float元素如果同时设置了margin值,此时margin的值会变为双倍的解决方法
IE中float元素如果同时设置了margin值,此时margin的值会变为双倍, 解决办法: 是在该元素中加入display:inline.
- DIV的Position属性和DIV嵌套DIV
1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...
- div嵌套引起的margin-top不起作用
通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一 ...
- 内层div的margin-top影响外层div——引出外边距合并Collapsing margins
内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...
随机推荐
- sublime Text2.0.2注册码
----- BEGIN LICENSE ----- Andrew Weber Single User License EA7E-855605 813A03DD 5E4AD9E6 6C0EEB94 BC ...
- 基于adt-bundle的Android开发环境搭建
web与移动是当今的热门,怎么说都得会一点,完全不懂是不行的. 一直想玩一下移动开发,穷屌丝暂时没有iPhone和Mac,所以先拿Android开刀. 之前也有想过玩一下Android,但是都被各种博 ...
- JNI: Passing multiple parameters in the function signature for GetMethodID
http://stackoverflow.com/questions/7940484/jni-passing-multiple-parameters-in-the-function-signature ...
- HDU 4497 GCD and LCM (数论)
题意:三个数x, y, z. 给出最大公倍数g和最小公约数l.求满足条件的x,y,z有多少组. 题解:设n=g/l n=p1^n1*p2^n2...pn^nk (分解质因数 那么x = p1^x1 * ...
- sap 如何获取公司间采购订单或销售订单的交货状态
在上SAP项目过程,上了SD模块的企业一般都要做一些跟公司间采购订单或销售订单的交货状态的报表,通过这些报表可以经客户的业务上提供很大的灵活性,至于如何的灵活,还是那句老话“谁用谁知道".1 ...
- Java文件合并
文件分割与合并是一个常见需求,比如:上传大文件时,可以先分割成小块,传到服务器后,再进行合并.很多高大上的分布式文件系统(比如:google的GFS.taobao的TFS)里,也是按block为单位, ...
- Android问题-DelphiXE5编义时提示找不到“连接器(arm-linux-androideabi-ld.exe)"
问题现象:DelphiXE5编义时提示找不到“连接器(arm-linux-androideabi-ld.exe)" 问题提示:Checking project dependencies... ...
- python 错误处理
在程序运行的过程中,如果发生了错误,可以事先约定返回一个错误代码,这样,就可以知道是否有错,以及出错的原因.在操作系统提供的调用中,返回错误码非常常见.比如打开文件的函数open(),成功时返回文件描 ...
- 如何自己动手实现 KVO(转)
KVO (Key-Value Observing) KVO 是 Objective-C 对观察者模式(Observer Pattern)的实现.也是 Cocoa Binding 的基础.当被观察对象的 ...
- Java经典面试题
1. Java中的异常处理机制的简单原理和应用. 当Java 程序违反了Java的语义规则时,Java虚拟机就会将发生的错误表示为一个异常.违反语义规则包括2种情况.一种是Java类库内置的语义检查. ...