div內嵌套p,div等元素出現的問題 http://caiceclb.iteye.com/blog/428085 文章內有些問題，可能不適應今天了。 正在學習前端，小問題是不能忽視的。 解決方案1是有問題的，margin:-1px;並不能解決高度增大問題，chrome,FF,Opara測試了下都不 ...
div內嵌套p,div等元素出現的問題
http://caiceclb.iteye.com/blog/428085
文章內有些問題，可能不適應今天了。
正在學習前端，小問題是不能忽視的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> new document </title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <style type="text/css"> 7 div {margin:0;padding:0;} 8 9 /*解決方案1？：加個border可以讓外部div變大，但是border的1px，用margin=-1px消除不了 border:1px solid #000;margin:-1px; */ 10 #top,#bottom {background:red;} 11 #bottom{background:green;} 12 13 p{margin:20px;} 14 #div {margin:30px;} 15 16 /* 此時margin為0，效果OK */ 17 /* 接下來先去掉p標簽的margin:0;讓前面的定義生效 18 p{margin:0px;} */ 19 #div {margin:0;} 20 21 /*解決方案2：*/ 22 #top { 23 overflow:hidden; /* 針對FF，Opera有效 */ 24 zoom:1; /* 對IE有效 */ 25 } 26 27 </style> 28 </head> 29 30 <body> 31 32 <div id="top"> 33 <p>p-tag margin</p> 34 </div> 35 36 <div id="bottom"> 37 <div id="div">div margin</div> 38 </div> 39 40 </body> 41 </html>
解決方案1是有問題的，margin:-1px;並不能解決高度增大問題，chrome,FF,Opara測試了下都不行。
解決方案2，可以完美解決（IE我沒測試）。
