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语言当中的作用域

    在C语言当中,变量的作用域分为两种:全局变量和局部变量. 在所有函数之外声明的变量是全局变量,这些变量可以在整个程序当中被访问: 局部变量是在某一对大括号({})之间生命的变量,这些变量在这对大括号之 ...

  2. ecside使用笔记（1）

    1. 部分属性描写叙述: 属性: tableId 描写叙述:  设置列表的唯一标识,默觉得"ec",当一个页面内有多个ECSIDE列表时,必须为每一个列表指定不同的 tableId ...

  3. huffman 编码

    huffman压缩是一种压缩算法,其中经典的部分就是根据字符出现的频率建立huffman树,然后根据huffman树的构建结果标示每个字符.huffman编码也称为前缀编码,就是每个字符的表示形式不是 ...

  4. 异步消息处理机制——Handler用法

    Handler 1. Message Messsge是线程之间传递的消息,它可以在内部携带少量的信息,用于在不同线程之间交换数据,Message的what字段,除此之外还可以使用arg1和arg2字段 ...

  5. C# 获取本机IP地址以及转换字符串

    /// <summary> /// IP地址转化 /// </summary> /// <param name="ipaddr">整型的IP地址 ...

  6. Python基础之 urllib模块urlopen()与urlretrieve()的使用方法详解。

    Python urllib模块urlopen()与urlretrieve()的使用方法详解   1.urlopen()方法urllib.urlopen(url[, data[, proxies]]) ...

  7. juce中的内存泄漏检测

    非常值得借鉴的做法,基于引用计数和局部静态变量,代码比较简单不加详解. //============================================================== ...

  8. VC com 通信实例

    HANDLE hCom;//全局變量串口句柄 COMMTIMEOUTS TimeOuts; DCB dcb; 按鈕代碼() { hCom=CreateFile(L“COM1”,// 串口名稱 GENE ...

  9. 饿了么 天降红包 bug ----这是谁的错

    早上来点餐,从没用饿了么点成功过,因为太难用. 今早,不,应该说前几天,出了个天降红包,领了个满20 减110的红包,没在意,因为还没升级客户端,不能用. 今早来,升级了一下客户端,下单了,看了饿了么 ...

  10. Normalize.css 介绍与源码解读

    开始 Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代. 它正是针对只需要统一的元素样式.该项目 ...