css样式为什么失效了
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<div style="width:100px; height:490px; float:left; margin-left:5px;">
<div style="width:100px; height:50px; background-color:#00CC66;"></div>
<div style="width:100px; height:150px; background-color:#FFFF00; margin-top:30px;">
<p style="width:80px; height:50px; margin-top:90px; background-color:#FF6600;"></p>
</div>
</div>
</body>
</html>
请问为什么这个代码会这么，明明是红色的盒子居然黄色盒子的顶部90px；可为什么显示的时候会是黄色的盒子距离绿色的盒子90px 我别的浏览器上都试过了，都是这结果，请高手指教，这是为什么？
请问为什么这个代码会这样，明明是红色的盒子距离黄色盒子的顶部90px；可为什么显示的时候会是黄色的盒子距离绿色的盒子90px 我别的浏览器上都试过了，都是这结果，请高手指教，这是为什么？急急急！！！ 展开
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<div style="width:100px; height:490px; float:left; margin-left:5px;">
<div style="width:100px; height:50px; background-color:#00CC66;"></div>
<div style="width:100px; height:150px; background-color:#FFFF00; margin-top:30px;">
<p style="width:80px; height:50px; margin-top:90px; background-color:#FF6600;"></p>
</div>
</div>
</body>
</html>
请问为什么这个代码会这么，明明是红色的盒子居然黄色盒子的顶部90px；可为什么显示的时候会是黄色的盒子距离绿色的盒子90px 我别的浏览器上都试过了，都是这结果，请高手指教，这是为什么？
请问为什么这个代码会这样，明明是红色的盒子距离黄色盒子的顶部90px；可为什么显示的时候会是黄色的盒子距离绿色的盒子90px 我别的浏览器上都试过了，都是这结果，请高手指教，这是为什么？急急急！！！ 展开
1个回答
展开全部
这是两个元素上外间距（ margin-top）重叠的问题，在此它们重叠为90px。
可这样解决：
为<p>元素上面的那个<div>加上padding值，如padding-top:1px;以分隔开，这样应该就没问题了，当然还有其它的方法，如加border，楼主自行去掌握。
可这样解决：
为<p>元素上面的那个<div>加上padding值，如padding-top:1px;以分隔开，这样应该就没问题了，当然还有其它的方法，如加border，楼主自行去掌握。
追问
咦，真的行耶，请问一下能不能再说一下什么是重叠呀，谢谢了！
追答
两个有 margin-top的块元素在一块，它们没padding值或border值将它们分开，于是就发生了重叠，在这里，你的两个块元素符合以上条件，故发生了重叠，为最大值90px，不知表述得是否正确，还望楼主以正规的渠道获得，我是在 w3school在线 上学到的。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
