外层元素(如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. CentOS6.5(带图形安装)在使用过程中遇到的一些网络问题迷惑

    比如,经常会遇到这样的问题************************** [root@SourceCompiler local]# pwd/usr/local[root@SourceCompil ...

  2. 好用的编辑框布局控件TdxLayoutControl

    TdxLayoutControl是编辑框的容器,里面的编辑框可以自动对齐,自由拖放,异常方便.

  3. psutil documentation

    Quick links Home page Blog Download Forum What’s new About From project’s home page: psutil (python ...

  4. Median of Two Sorted Arrays-----LeetCode

    There are two sorted arrays A and B of size m and n respectively. Find the median of the two sorted ...

  5. UI进阶 文件管理器(NSFileManager)文件对接器(NSFileHandle)

    一.文件管理器与文件连接器之间的区别 文件管理器(NSFileManager) 此类主要是对文件进行的操作(创建/删除/改名等)以及文件信息的获取. 文件连接器(NSFileHandle) 此类主要是 ...

  6. QT输入输出(一) 之 QDataStream 测试

    QT提供了两个高级别的流类---QDataStream和QTextStream,可以从任意的输入输出设备读取或写入数据. QDataStream用于读写二进制数据,它的优点是:在读写数据的时候已经严格 ...

  7. jqGrid初次使用遇到的问题及解决方法

    问题一:初始化定义翻页用的导航栏时,表中出现"undefined"方框: 解决:需要导入grid.locale-cn.js文件. 问题二:页面只有一页,无法翻页: 解决:初始化设置 ...

  8. WinSock异步IO模型之Select

    如果你想在Windows平台上构建服务器应用,那么I/O模型是你必须考虑的. Windows操作系统提供了五种I/O模型,分别是: ■ 选择(select): ■ 异步选择(WSAAsyncSelec ...

  9. CSS的魔法和魅力

    其实我最开始学会的语言是HTML,我记得那还是大一的事情.当时我对床的兄弟DR放了一本HTML的书在床上,我因为没事就拿来看看.那本书大概只有50页左右,可是可以说如果没有这本书,今天Maybe我不会 ...

  10. 前端优化分析 之 javascript引用位置优化

    在很多优化法则中都提到,尽量将javascript放到页面底部,这是为什么呢 我通过firebug进行了下简单的分析 看下图  本页面首尾都存在javascript代码 我们分析得出 1.整个页面文档 ...