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语言程序设计_第2章_C程序设计的初步知识

    正负号与被除数一致. 3 % (-5) == 3 (-3) % 5 == -3 不用求余运算符,求出余数. int x, y; 答:x - x / y * y; const int i = 10; c ...

  2. Redmine开启服务

    写了一个启动Redmine的开机脚本,redmine文件在/etc/init.d/下 #!/bin/sh ### BEGIN INIT INFO # Provides: Dean Chen # Req ...

  3. 【最大点权独立集】【HDU1565】【方格取数】

    题目大意: 给你一个n*n的格子的棋盘,每个格子里面有一个非负数. 从中取出若干个数,使得任意的两个数所在的格子没有公共边,就是说所取的数所在的2个格子不能相邻,并且取出的数的和最大. 初看: 没想法 ...

  4. jmx使用应该注意的基本规范

    1.标准MBean 名称必需是在要监控的类名后面加上“MBean ”. 2.监控的类和MBean 接口必需在同一包下,也可以理解为注册的接口名字必须以MBean结尾,接口实现类比接口名字少了MBean ...

  5. Linq to sql 实现多条件的动态查询(方法一)

    /// <summary> /// Linq to sql 多字段动态查询 /// </summary> /// <returns></returns> ...

  6. tomcat 发布webService

    <!-- tomcat发布webservice时所需jar --> <dependency> <groupId>com.sun.xml.ws</groupId ...

  7. iOS学习心得——UINavigationController

            UINavigationController和UItableviewController一样也是iOS开发中常用的控件之一,今天就来学习一下它的常见用法.         有人说tab ...

  8. 【.Net】从.NET平台调用Win32 API

    小序        Win32 API可以直接控制Microsoft Windows的核心,因为API(Application Programming Interface)本来就是微软留给我们直接控制 ...

  9. 私有构造函数（c# .NET）

    如果类成员有private修饰符,就不允许在类范围以外访问这个类成员.对类构造函数应用private修饰符时,则禁止外部类创建该类的实例.尽管看上去有些不好理解(既然不能实例化,那么这个类还有什么用处 ...

  10. 记一次phpStudy apache启动后自动关闭 修改过程

    第一种可能原因:路径包含中文 .添加站点 2.重启服务 3.遇见问题 apache 刚启动,1秒钟中后就停止 4.解决问题 发现是自己添加的网站中包含中文路径的问题,建议不要在自己的网站目录下包含中文 ...