外层元素（如div）中只有一个非空子元素，此时margin是被折叠了。两者之间取最大的margin值，表现在外层父元素上，而不是内层子元素。

　　注意：

　　（1）只有垂直方向上才会出现此现象，水平方向不会出现该现象；

　　（2）解决方法：

　　1）给内层子元素添加浮动；

　　2）在外层父元素内加 padding-top；

　　3）在外层父元素加 overflow:hidden；

CSS 之 内层div填充margin,外层div的背景色不会覆盖该margin的更多相关文章

  1. css让内层div自动撑开外层div

    .clear{clear:both;height:0px;font-size: 1px;line-height: 0px;} <div class="audi_items"& ...

  2. div高度自适外层div高度随里层div高度自适

    尝试过许多办法 其中一网友的最靠谱就是在外层div样式添加两个标签(不能少) clear:both;  overflow:auto;

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

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

  4. css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层，正常是 里外层 鼠标上来 外层有hover，如果就想到里层hover触发外层hover，要用外层position 定义绝对定位，内层的hover跳出外层的div，这样视觉上就是两个单独的div，进行内外层联动。

    css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...

  5. [CSS][转载]内层div的margin-top影响外层div

    参考 内层div的margin-top影响外层div——引出外边距合并 div嵌套导致子区域margin-top失效不起作用的解决方法 我使用的是在外层的div中添加 border: 1px soli ...

  6. 让内层Div将外层Div撑开

    在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示: <div style="width:300px; "& ...

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

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

  8. IE浏览器中overflow:hidden无效，内层元素超出外层div的解决方法

    原文地址:http://www.xin126.cn/show.asp?id=2624 在用css布局的时候,用IE浏览器(ie6.ie7.ie8)预览,有时候会出现内层元素(内部DIV.图片等)超出外 ...

  9. jsp学习---css基础知识学习,float,position,padding,div,margin

    1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

随机推荐

  1. jQuery和js如何判断checkbox是否选中

    jquery: <div id="divId" class="divTable"><div class="tableBody&quo ...

  2. 第三百三十七天 how can I 坚持

    看了两集<太阳的后裔>,你眼中的你自己,真实的你自己,他眼中的你,你眼中的他,他眼中的他自己,真实的他自己.好乱. 何须让别人懂你,何须让自己懂自己,将就着一天天过吧. 睡觉.

  3. Spark的发展历程

    ·2009年:Spark诞生于AMPLab.·2010年:开源.·2013年6月:Apache孵化器项目.·2014年2月:Apache顶级项目.·2014年2月:大数据公司Cloudera宣称加大S ...

  4. HTML5每日一练之OL列表的改良

    在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...

  5. stm32 usb数据接收与数据发送程序流程分析

    http://blog.csdn.net/u011318735/article/details/17424349 既然学习了USB,那就必须的搞懂USB设备与USB主机数据是怎么通讯的.这里主要讲设备 ...

  6. CISCO3560 VLAN配置实例

    1.注意事项 1.1.交换机启动需要大约4-5分钟: 1.2.网线插入交换机接口从黄变为绿需要大约1-2分钟,即进入正常工作模式: 1.3.建议使用XP系统进行操作,2003默认没有安装超级终端,需要 ...

  7. effective c++ （二）

    条款04:确定对象使用前已先被初始化 1.由于 c part of c++而且初始化可能导致运行期成本,那么就不保证发生初始化:例如arry是c part of c++的部分从而不能保证初始化,而ST ...

  8. JPBM4.4基础及数据库说明

    JPBM4.4基础及数据库说明 对jBPM4.4数据库的几张表简单介绍: A.资源库和运行时表结构 JBPM4_DEPLOYMENT   流程定义表                           ...

  9. C：内存分配、内存中五大区

     1.内存的划分  (从高到低依次是: 栈区 . 堆区 .全局静态区 . 常量区 . 代码区 )栈区是系统自动回收,堆区是我们手动回收  2. 栈区   在函数内部定义的局部变量和数组.都存放在栈区, ...

  10. ReentrantLock

    与synchronized相同并发性和内存语义. [新增特性]锁投票.定时锁等候.可中断锁等候.更少时间调度线程. [用法注意点]Lock必须在finally块中释放. Lock lock = new ...