外层元素(如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. uber优步提高成单率,轻松拿奖励!

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. 关于Ext.NET Demo程序在IIS7.5部署出现"Ext未定义"的解决方案

    有以下三点 1.应用程序池请用ASP.NET4.0经典模式 2.安装ASP.NET   控制面板-->程序和功能-->打开或关闭WIndows功能-->Internet信息服务--& ...

  3. how to javafx hide background header of a tableview?

    http://stackoverflow.com/questions/12324464/how-to-javafx-hide-background-header-of-a-tableview ———— ...

  4. RedHat/CentOS6.4---永久关闭iptables

    今天无意中发现一个现象,当我关闭iptables并且停止iptables服务,但是总会有一些出奇的事情发生,当我再次启动系统,查看iptables状态,iptables又自动开启,很是无奈啊!在Red ...

  5. Ubuntu 搭建PHP开发环境

    Ubuntu确实很好玩.有喜欢的命令行,简洁的界面,不同于Window要的感觉.偶尔换换环境工作,学习Linux的思维方式,是一种不错的做 法.之前也折腾过Ubuntu,不过,因为网络的问题,一直没有 ...

  6. bootStrap modal无法滚动处理

    bug:在大显示器上,模态框无法滚动,改变浏览器窗口大小,模态框可以滚动. 处理:模态框显示后,执行resize.或者直接调用handleUpdate 'shown.bs.modal #orderDe ...

  7. HTML第八天笔记

    第一个知识点是关于伪类的,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. 今天做php经典实例,发现,我是对的,面试官给我说错了

    那是七月中下旬在乐元素公司面试,问了我问什么 $str = "Hellow {$res} world";这么写,我回答说 在字符串中插入复杂变量可以用花括号干起来把? 他告诉我 应 ...

  9. phantomjs

    PhantomJS是以WebKit为核心并提供JavaScript编程接口(API)的无界面浏览器. 它提供对web标准的 快速 并且 原生 的支持: DOM操作.CSS选择符.JSON.Canvas ...

  10. 跨浏览器实现盒阴影(box-shadow)效果

    现在流行的设计里总是使用了大量的阴影,看看Vista.win7里夸张的box阴影,mac里的阴影比比皆是.CSS3的box-shadow属性可以让我们轻松实现图层阴影效果,使我们可以不再总是依赖于使用 ...