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. 国内常用ntp服务器ip地址

    ntp.sjtu.edu.cn 202.120.2.101 (上海交通大学网络中心NTP服务器地址)s1a.time.edu.cn 北京邮电大学s1b.time.edu.cn 清华大学s1c.time ...

  2. Xcode8 注释快捷键无效， 解决方案

    这个是因为苹果解决xcode ghost.把插件屏蔽了.解决方法命令运行: sudo /usr/libexec/xpccachectl 然后必须重启电脑后生效    

  3. java logger级别

    typedef enum android_LogPriority { ANDROID_LOG_UNKNOWN = 0, ANDROID_LOG_DEFAULT,    /* only for SetM ...

  4. Emmet 插件使用教程

    1)使用 Emmet 生成 HTML 的语法详解生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 doctype.html.head.body 以及 meta 等内容.你只需要输入一个 ...

  5. Windows SQL Server 2012 R2 安装Intel I217-V/I218-V网卡驱动(转)

    1.下载Intel官方驱动: https://downloadcenter.intel.com/Detail_Desc.aspx?agr=Y&DwnldID=23071&lang=zh ...

  6. c# 自定义位数生成激活码

    Random random = new Random(~unchecked((int)DateTime.Now.Ticks));private string CreateAndCheckCode(Ra ...

  7. C语言strcmp()函数：比较字符串（区分大小写）

    头文件:#include <string.h> strcmp() 用来比较字符串(区分大小写),其原型为: int strcmp(const char *s1, const char *s ...

  8. Java内部类总结

    内部类是一种编译器现象,与虚拟机无关.编译器将会把内部类翻译成用美元符号$分隔外部类名与内部类名的常规类文件,而虚拟机对此一无所知.编译器为了引用外部类,生成了一个附加的实例域this$0 为什么要用 ...

  9. Best Financing（HD4833）

    每笔收入产生的收益是独立的. 计算所有点的收益率,累计. #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<al ...

  10. 在非MVC环境下使用 Razor引擎

    Razor引擎下载地址: http://github.com/Antaris/RazorEngine 解析Model: string template = "Hello @Model.Nam ...