CSS 之 内层div填充margin,外层div的背景色不会覆盖该margin
外层元素(如div)中只有一个非空子元素,此时margin是被折叠了。两者之间取最大的margin值,表现在外层父元素上,而不是内层子元素。
注意:
(1)只有垂直方向上才会出现此现象,水平方向不会出现该现象;
(2)解决方法:
1)给内层子元素添加浮动;
2)在外层父元素内加 padding-top;
3)在外层父元素加 overflow:hidden;
CSS 之 内层div填充margin,外层div的背景色不会覆盖该margin的更多相关文章
- css让内层div自动撑开外层div
.clear{clear:both;height:0px;font-size: 1px;line-height: 0px;} <div class="audi_items"& ...
- div高度自适外层div高度随里层div高度自适
尝试过许多办法 其中一网友的最靠谱就是在外层div样式添加两个标签(不能少) clear:both; overflow:auto;
- div嵌套引起的内层margin-top对外层div起作用
嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...
- 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触发 ...
- [CSS][转载]内层div的margin-top影响外层div
参考 内层div的margin-top影响外层div——引出外边距合并 div嵌套导致子区域margin-top失效不起作用的解决方法 我使用的是在外层的div中添加 border: 1px soli ...
- 让内层Div将外层Div撑开
在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示: <div style="width:300px; "& ...
- 内层div的margin-top影响外层div——引出外边距合并Collapsing margins
内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...
- IE浏览器中overflow:hidden无效,内层元素超出外层div的解决方法
原文地址:http://www.xin126.cn/show.asp?id=2624 在用css布局的时候,用IE浏览器(ie6.ie7.ie8)预览,有时候会出现内层元素(内部DIV.图片等)超出外 ...
- jsp学习---css基础知识学习,float,position,padding,div,margin
1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
随机推荐
- CentOS6.5(带图形安装)在使用过程中遇到的一些网络问题迷惑
比如,经常会遇到这样的问题************************** [root@SourceCompiler local]# pwd/usr/local[root@SourceCompil ...
- 好用的编辑框布局控件TdxLayoutControl
TdxLayoutControl是编辑框的容器,里面的编辑框可以自动对齐,自由拖放,异常方便.
- psutil documentation
Quick links Home page Blog Download Forum What’s new About From project’s home page: psutil (python ...
- 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 ...
- UI进阶 文件管理器(NSFileManager)文件对接器(NSFileHandle)
一.文件管理器与文件连接器之间的区别 文件管理器(NSFileManager) 此类主要是对文件进行的操作(创建/删除/改名等)以及文件信息的获取. 文件连接器(NSFileHandle) 此类主要是 ...
- QT输入输出(一) 之 QDataStream 测试
QT提供了两个高级别的流类---QDataStream和QTextStream,可以从任意的输入输出设备读取或写入数据. QDataStream用于读写二进制数据,它的优点是:在读写数据的时候已经严格 ...
- jqGrid初次使用遇到的问题及解决方法
问题一:初始化定义翻页用的导航栏时,表中出现"undefined"方框: 解决:需要导入grid.locale-cn.js文件. 问题二:页面只有一页,无法翻页: 解决:初始化设置 ...
- WinSock异步IO模型之Select
如果你想在Windows平台上构建服务器应用,那么I/O模型是你必须考虑的. Windows操作系统提供了五种I/O模型,分别是: ■ 选择(select): ■ 异步选择(WSAAsyncSelec ...
- CSS的魔法和魅力
其实我最开始学会的语言是HTML,我记得那还是大一的事情.当时我对床的兄弟DR放了一本HTML的书在床上,我因为没事就拿来看看.那本书大概只有50页左右,可是可以说如果没有这本书,今天Maybe我不会 ...
- 前端优化分析 之 javascript引用位置优化
在很多优化法则中都提到,尽量将javascript放到页面底部,这是为什么呢 我通过firebug进行了下简单的分析 看下图 本页面首尾都存在javascript代码 我们分析得出 1.整个页面文档 ...