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. [转]JSOM绘制地图区块及航道路径

    From :http://support.sailstech.com/kb/c73fd2405d79911253e568ccdc69256dc7c8fb5c/josm 步驟一: 使用JOSM繪製地圖區 ...

  2. CDOJ 631 敢说敢做 记忆化搜索and动规

    //跟沈爷学的 传送门http://www.cnblogs.com/Xiper/p/4639636.html #include<cstdio> #include<iostream&g ...

  3. flexigrid 修改json格式

    1.修改默认的json格式为key:value 修改前 rows: [{id:'ZW',cell:['ZW','ZIMBABWE','Zimbabwe','ZWE','716']},{id:'ZW', ...

  4. IOS架构师之路：我对IOS架构的点点认识(大纲)

    1.今天我鼓起了勇气,想纪录自己对IOS架构学习成长的点点滴滴. 从事IOS开发也有几年的时间,从刚開始最主要的语言.界面.逻辑,再到后面复杂点的线程.数据处理.网络请求.动画,最后到最复杂的底层音视 ...

  5. Devexpress之barManager控件属性

    隐藏菜单栏左边的竖线和右边的箭头? 1.隐藏菜单栏上右边的箭头属性设置:OptionsBar=>>AllowQuickCustomization=False 2.隐藏菜单栏左边的竖线属性设 ...

  6. JavaScript跨域深入研究与解决办法（转）

    什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首 ...

  7. 安装rvm命令行工具

    rvm是一个命令行工具,可以提供一个便捷的多版本ruby环境的管理和切换. https://rvm.io/ 如果你打算学习ruby/rails, rvm是必不可少的工具之一. 这里所有的命令都是再用户 ...

  8. sql server sys.object表字段说明

    列名 数据类型 说明 name sysname 对象名. object_id int 对象标识号. 在数据库中是唯一的. principal_id int 如果不是架构所有者,则为单个所有者的 ID. ...

  9. currentStyle、getComputedStyle

    element.offsetWidth: 返回元素的宽度,包括边框和内边距. element.offsetHeight: 返回元素的高度,包括边框和内边距. currentStyle: 获取计算后的样 ...

  10. 读写Excle,不用office环境

    1.下载NPOI.dll,并添加引用 2.ExcelHelper帮助类,以下为读写的参照方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...