在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的解决办法的更多相关文章

  1. 嵌套div中margin-top转移问题的解决办法

    在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCT ...

  2. div嵌套引起的内层margin-top对外层div起作用

    嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...

  3. HTML中div嵌套div的margin不起作用

    下面介绍一下div嵌套div时margin不起作用的解决方案. 顺便科普下margin的定义和用法. div嵌套的HTML代码: <!DOCTYPE html> <html lang ...

  4. div嵌套导致子区域margin-top失效不起作用的解决方法

    有两个嵌套关系的div,如果外层div的父元素padding值为0, 那么内层div的margin-top或者margin-bottom的值会"转移"给外层div,使父元素产生上外 ...

  5. div嵌套引起的margin-top不起作用(转)

    嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...

  6. IE中float元素如果同时设置了margin值,此时margin的值会变为双倍的解决方法

    IE中float元素如果同时设置了margin值,此时margin的值会变为双倍, 解决办法: 是在该元素中加入display:inline.

  7. DIV的Position属性和DIV嵌套DIV

    1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...

  8. div嵌套引起的margin-top不起作用

    通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一 ...

  9. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

随机推荐

  1. vector(相对线程安全) arryList(线程不安全)

    1.什么是线程安全? 如果说某个集合是线程安全的,那么我们就不用考虑并发访问这个集合?(需要定义自己百度,但是很难懂) 2.深入jvm中的线程安全的级别. a不变模式(String等基本类型) b.绝 ...

  2. 微软Azure云主机及blob存储的网络性能测试

    http://www.cnblogs.com/sennly/p/4137024.html 微软Azure云主机及blob存储的网络性能测试 1. 测试目的 本次测试的目的在于对微软Azure的云主机. ...

  3. MVC5中使用KinEditor

    参考:http://www.cnblogs.com/weicong/archive/2012/03/31/2427608.html 第一步 将 KindEditor 的源文件添加到项目中,建议放到 / ...

  4. HW6.14

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  5. oracle 时间函数

    加法 select sysdate,add_months(sysdate,12) from dual; --加1年 select sysdate,add_months(sysdate,1) from ...

  6. ubuntu 13.04下sublime text 3使用中文输入法

    主要思路参考 http://blog.yanwen.org/archives/1955.html libsublime-imfix.so 这个库自己编译和从他这下载的 md5一样.可以不用编译了.直接 ...

  7. hdu5785--Interesting(manacher)

    题意:求给定字符串的三元组(I,J,K)  使得S[i..j] 和 S[j+1..k] 都是回文串.求所有满足条件的三元组 ∑(i*k) 题解:求出以j为结尾的回文串起始位置的和记为lv[j],和以j ...

  8. Java HashMap 源码解析

    今天正式开始分析具体集合类的代码,首先以既熟悉又陌生的HashMap开始. 签名(signature) public class HashMap<K,V> extends Abstract ...

  9. soliworks三维机柜布局(一)创建设备型号库

    以某直升机电气系统为例:为电路中的各个设备创建设备型号库是进行三维线束设计的前提之一(如下图所示:窗口中箭头所指的3D部件一定要为每个设备都添加) 设备只有添加了3d模型,在solidworks进行机 ...

  10. 起底多线程同步锁(iOS)

    iOS/MacOS为多线程.共享内存(变量)提供了多种的同步解决方案(即同步锁),对于这些方案的比较,大都讨论了锁的用法以及锁操作的开销,然后就开销表现排个序.春哥以为,最优方案的选用还是看应用场景, ...