在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. sun X509/X500Name异常(已解决)

    appium环境搭建好后,再跑第一个脚本时遇到这个问题: Errors occurred during the build.Errors running builder 'Android Packag ...

  2. 卡尔曼滤波器【Kalman Filter For Dummies】

    搬砖到此: A Quick Insight     As I mentioned earlier, it's nearly impossible to grasp the full meaning o ...

  3. [iOS基础控件 - 2] 按钮的基本使用

    UIButton A.素材准备 1.图片素材放置到Images.xcassets中     B.按钮状态 1.normal:默认状态 Default 对应的枚举常量:UIControlStateNor ...

  4. CALayer精讲

    前言 CALayer包含在QuartzCore框架中,这是一个跨平台的框架,既可以用在iOS中又可以用在Mac OS X中.后面要学Core Animation就应该先学好Layer(层). 我们看一 ...

  5. php中带mb的字符串处理函数

    int strlen ( string $string ) int mb_strlen ( string $str [, string $encoding ] ) encoding参数为字符编码.如果 ...

  6. 【STL学习】map&set

    技术不只是我的工作,也是我的生活,以后的博客中会穿插一些个人的喜悦.愤怒或者感悟,希望大家能够接受. 我所有的一切,比我技术更好的怕是我的脸皮了,昨天收到京东面试没有通过的消息,喊了几句“我好悲伤啊” ...

  7. 【转】Netty那点事(二)Netty中的buffer

    [原文]https://github.com/code4craft/netty-learning/blob/master/posts/ch2-buffer.md 上一篇文章我们概要介绍了Netty的原 ...

  8. 退出程序是跳过屏幕自检 比如 必输 EXIT-COMMAND

    控制必须输入可以,但是我退出程序的时候还要求我输入个值才能退出,这太变态了,相信很多同志都在SAP程序中反感过这个问题. 标准程序咱就不说了,忍了,新开发的功能还是要解决这个问题. 办法很简单:MOD ...

  9. java中调用dll文件的两种方法

    一中是用JNA方法,另外是用JNative方法,两种都是转载来的, JNA地址:http://blog.csdn.net/shendl/article/details/3589676   JNativ ...

  10. android studio 真机调试

    1.使用usb连接电脑,打开开发者选项,打开usb调试. 2.不能使用仅充电,修改为媒体设备(MTP) 3.如果无法连接可以使用豌豆荚或者金山手机助手连接. 4.运行android程序即可. 5.如果 ...