div嵌套内层div的margin-top转移给外层div的解决办法
在web开发过程中,有些情况下给内层div设置的margin却被莫名奇妙的转移给了外层div。百度之后,发现它竟然是css2.1中盒模型中规定的内容:
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。
解决办法:
1.给父元素添加 overflow:hidden; 属性。
2.或者给父元素添加 padding-top 属性,属性值为要设定的margin 值。
div嵌套内层div的margin-top转移给外层div的解决办法的更多相关文章
- 嵌套div中margin-top转移问题的解决办法
在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCT ...
- div嵌套引起的内层margin-top对外层div起作用
嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...
- HTML中div嵌套div的margin不起作用
下面介绍一下div嵌套div时margin不起作用的解决方案. 顺便科普下margin的定义和用法. div嵌套的HTML代码: <!DOCTYPE html> <html lang ...
- div嵌套导致子区域margin-top失效不起作用的解决方法
有两个嵌套关系的div,如果外层div的父元素padding值为0, 那么内层div的margin-top或者margin-bottom的值会"转移"给外层div,使父元素产生上外 ...
- div嵌套引起的margin-top不起作用(转)
嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...
- IE中float元素如果同时设置了margin值,此时margin的值会变为双倍的解决方法
IE中float元素如果同时设置了margin值,此时margin的值会变为双倍, 解决办法: 是在该元素中加入display:inline.
- DIV的Position属性和DIV嵌套DIV
1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...
- div嵌套引起的margin-top不起作用
通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一 ...
- 内层div的margin-top影响外层div——引出外边距合并Collapsing margins
内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...
随机推荐
- e2e 自动化集成测试 环境搭建 Node.js Selenium WebDriverIO Mocha Node-Inspector
Node.js已经出来了许多年载,至今才开始接触.周未在家闲来无事,一时心血来潮,Google了大量的文章,经过实验,终于可以把整个环境给搭起来, 废话不多话,请看步骤. 特别注意, 本文章是针对Wi ...
- 【译】 AWK教程指南 附录B-Actions
Actions 是由下列指令(statement)所组成: 表达式 ( 函数调用,赋值...) print 表达式列表 printf( 格式化字符串, 表达式列表) if( 表达式 ) 语句 [els ...
- [原]SyntaxHighlighter使用笔记
[Date]2013-09-21 [Environment]SyntaxHighlighter 3.0.83 [Author]wintys (wintys@gmail.com) http://wint ...
- MMU(what,how,todo)
出处:http://www.100ask.org/bbs/forum.php?mod=viewthread&tid=11580&fromuid=5490 正文黑色,代码蓝色,重点标红. ...
- Petshop学习第三天
ASP.NET缓存 ASP.NET充分利用缓存机制,通过某种方法,将系统需要的数据对象.Web页面存储在内存中,使得Web站点需要这些数据时,不经过繁琐的数据库连接.查询和复杂的逻辑运算,就可以触手可 ...
- Mac java环境配置
进入命令行 cd ~ touch .bash_profile vi .bash_profile 输入内容jdk变量配置内容: export JAVA_HOME=/Library/Java/JavaVi ...
- 【转】Mybatis Generator最完整配置详解
本文转简书:http://www.jianshu.com/p/e09d2370b796 --> --> <!-- 自动识别数据库关键字,默认false,如果设置为true,根据Sql ...
- eclipse配置struts.xml自动提示
a)window – preferences – xml - xml catalog –> add b)选择key type为URI c)key: http://struts.apache.o ...
- 新手学习 Vim 的五个技巧
多年来,我一直想学 Vim.如今 Vim 是我最喜欢的 Linux 文本编辑器,也是开发者和系统管理者最喜爱的开源工具.我说的学习,指的是真正意义上的学习.想要精通确实很难,所以我只想要达到熟练的水平 ...
- Java网络编程(UDP协议:发送端)
package WebProgramingDemo; import java.io.IOException; import java.net.DatagramPacket; import java.n ...