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

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

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

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

1、

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>div嵌套p/div</title>
 5   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 6   <style type="text/css">
 7     body,p,div {margin:0;padding:0;}
 8     #top,#bottom {background:red;}
 9     #bottom{background:green;}
10     p{margin:20px;}
11     #div {margin:30px;}
12     #div {margin:0;}
14   </style>
15 </head>
16 <body>
17   <div id="top">
18     <p>p-tag margin</p>
19   </div>
20   <div id="bottom">
21     <div id="div">div margin</div>
22   </div>
23 </body>
24 </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有效果；

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>div嵌套p/div</title>
 5   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 6   <style type="text/css">
 7     body,p,div {margin:0;padding:0;zoom:1;overflow:hidden;}/*border:1px solid #000;margin:-1px;*/
 8     #top,#bottom {background:red; }
 9     #bottom{background:green;}
10     p{margin:20px;}
11     #div {margin:30px;}
12     #div {margin:0;}
13   </style>
14 </head>
15 <body>
16   <div id="top">
17     <p>p-tag margin</p>
18   </div>
19   <div id="bottom">
20     <div id="div">div margin</div>
21   </div>
22 </body>
23 </html>

 

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

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

posted @ 2016-04-13 10:10  宋英杰  阅读(681)  评论(0)  编辑  收藏  举报