外层元素（如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. Linux中内存查看命令free详解（转）

    add by zhj:说了那么多,其实看第一行就足够了,free项就是未使用的内存.其实,我是感觉压根就没必要 使用free命令,用top代替就行了 原文:http://liustb.blog.163 ...

  2. Maven+Spring Batch+Apache Commons VF学习

    Apache Commons VFS资料:例子:http://www.zihou.me/html/2011/04/12/3377.html详细例子:http://p7engqingyang.iteye ...

  3. <filter-mapping> 的 <dispatcher> 的作用

    The dispatcher has four legal values: FORWARD, REQUEST, INCLUDE, and ERROR. A value of FORWARD means ...

  4. 利用HTML5开发Android(5)---HTML5地理位置服务在Android中的应用

    Android中 Java代码 //启用地理定位 webSettings.setGeolocationEnabled(true); //设置定位的数据库路径 webSettings.setGeoloc ...

  5. JedisPool使用原理和源代码

    1,JedisPool的使用 <!-- 连接池的配置信息 --><beanid="jedisConfig"class="redis.clients.je ...

  6. MVC路由中routes.IgnoreRoute("{resource}.axd/{*pathInfo}") 到底什么意思！

    转自:http://blog.csdn.net/lvjin110/article/details/24638913 参考(1) http://www.cnblogs.com/flyfish2012/a ...

  7. 表单input按钮在各浏览器之间的兼容性

    从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下. input按钮在各个浏览器之间的兼容性问题,看下边这段代码: input.item { backgrou ...

  8. The source attachment does not contain the source for the file SignatureParser.class错误

    在myeclipse整合tomcat的完毕后,再启动tomcat的时候会出现这样的错误,呵呵,错误的大致意思是什么相关联错误,其实是myeclipse新加入的tomcat的模式出现错误了,myecli ...

  9. hadoop分布式部署（2014-3-8）

    hadoop简介: (维基百科)Apache Hadoop是一款支持數據密集型分佈式應用并以Apache 2.0許可協議發佈的開源軟體框架.它支持在商品硬件構建的大型集群上運行的應用程序.Hadoop ...

  10. 一分钟制作U盘版BT3 - 有图滴儿 bt3破解教程

    一分钟制作 BT3 U盘版方便,快捷简单无效不退款 光盘版BT3, 大概694MB,直接刻盘,然后用光盘引导,就可以进入bt3,连接为:http://ftp.heanet.ie/mirrors/bac ...