div内嵌p,div等块元素出现的问题

http://caiceclb.iteye.com/blog/428085

div内部块级元素，比如p,div，设置外间距（margin）的话会怎样。本来还纳闷div莫名奇妙的怎么多出了一些外边距，甚至设置margin为0，都不能解决问题。到底是怎么回事呢？

1、

 <!DOCTYPE html>

 <html>

 <head>

   <title>div嵌套p/div</title>

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

   <style type="text/css">

     body,p,div {margin:0;padding:0;}

     #top,#bottom {background:red;}

     #bottom{background:green;}

     p{margin:20px;}

     #div {margin:30px;}

     #div {margin:0;}

   </style>

 </head>

 <body>

   <div id="top">

     <p>p-tag margin</p>

   </div>

   <div id="bottom">

     <div id="div">div margin</div>

   </div>

 </body>

 </html>

现在 p.margin="20px";FF,chrome,opera,IE6,IE9测试发现div#top并没有变大，看底色就知道；但却多了个margin。

那设定#top.margin=0;呢？没用。

然后#div.margin:30px;发现出现一样的问题。

怎么办？幸亏我以前看过怎么测试修改方面的资料；加border或者overflow，zoom（ie）。

解决方案1，给#top加border测试； border:1px solid #000;

好，正常了，但是边框有宽度啊，影响效果。那就加个margin:-1px; 测试发现没效果，高度还是多了2px。

解决方案2：

overflow:hidden; 测试效果：FF,chrome,opera,ie9都有效果，ie6没效果；

zoom:1; 测试只有ie6有效果；

两者结合一起使用呢？测试：都有效果。

 <!DOCTYPE html>

 <html>

 <head>

   <title>div嵌套p/div</title>

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

   <style type="text/css">

     body,p,div {margin:0;padding:0;zoom:1;overflow:hidden;}/*border:1px solid #000;margin:-1px;*/

     #top,#bottom {background:red; }

     #bottom{background:green;}

     p{margin:20px;}

     #div {margin:30px;}

     #div {margin:0;}

   </style>

 </head>

 <body>

   <div id="top">

     <p>p-tag margin</p>

   </div>

   <div id="bottom">

     <div id="div">div margin</div>

   </div>

 </body>

 </html>

/////////////////////////////////////////////////////////////////////////////////

原理我不清楚，先用着；当然建议不要这么嵌套着用。

div内嵌p,div等块元素出现的问题的更多相关文章

  1. Selenium2+python自动化26-js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.

  2. 2.24 js处理内嵌div滚动条

    2.24 js处理内嵌div滚动条 前言    前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦.一.内嵌滚动条    1.下面这张图 ...

  3. Selenium2学习（十八）-- js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相. ...

  4. Selenium2+python自动化26-js处理内嵌div滚动条【转载】

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.

  5. css笔记12：块元素和行内元素

    1.概念: 行内元素:又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的内联元素有<span><a> 块元素:块元素一般都是从新行开始,可容纳文本,其他内联元素和其他块 ...

  6. 元素显示模式：块元素 & 行内元素 & 行内块元素

    元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...

  7. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  8. mongodb对数组元素及内嵌文档进行增删改查操作(转)

    from:https://my.oschina.net/132722/blog/168274 比如我有一个user类,他包含一个标签属性,这个标签是一个数组,数组里面的元素是内嵌文档,格式如下: &l ...

  9. MongoDB 系列(二) C# 内嵌元素操作 聚合使用

    "_id" : "639d8a50-7864-458f-9a7d-b72647a3d226","ParentGuid" : "00 ...

随机推荐

  1. C#版QQTea加密

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Wind ...

  2. scanf与printf用法详解

    一.scanf家族 1.scanf家族的原型 int scanf(char const *format,...); int fscanf(FILE *stream,char const *format ...

  3. IOS(swift)-数据存储 · 用NSUserDefaults存储配置信息

    1.用NSUserDefaults存储配置信息 注:本次使用NSUserDefaults存储信息是在不考虑安全问题的前提下.分两种情况:1.如果是密码用户名等敏感信息,请使用Keychain存储用户敏 ...

  4. 依赖注入及AOP简述（四）——“好莱坞原则”和依赖注入框架简介 .

    3.2.    “好莱坞原则” 看了前面关于依赖注入概念的描述,我们来提炼出依赖注入的核心思想.如果说传统的组件间耦合方式,例如new.工厂模式等,是一种由开发者主动去构建依赖对象的话,那么依赖注入模 ...

  5. IDE idea 更换项目的JDK步骤

    1.如图:

  6. repeater 一个td多个div显示图片

    <table class="table table-bordered table-responsive"> <tbody> <asp:Repeater ...

  7. 想使用WM_CONCAT 函数进行多列转一行，但发现没有

    查看数据库版本: SELECT * FROM v$version; 1 Oracle Database 11g Enterprise Edition Release 11.1.0.7.0 - 64bi ...

  8. BestCoder Round #75 1003 - King's Order

    国王演讲后士气大增,但此时战争还没有结束,国王时不时要下发命令. 由于国王的口吃并没有治愈,所以传令中可能出现:“让第三军-军-军,到前线去” 这样的命令.由于大洋国在军队中安插了间谍 , 战事紧急, ...

  9. 项目中关于AJAX的使用总结

    一.使用情况:AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下使用.AJAX的核心:向服务器发送多个请求而无需用户等待来至服务器的响应. 二.AJAX的优势     1. ...

  10. Android _优雅实现元素间的分割线 （支持3.0以下）

    转:http://blog.csdn.net/lmj623565791/article/details/42407923 1.概述 话说,随着Android SDK版本的升级,很多控件增加了新的属性方 ...