margin-top没有效果，border-bottom消失，
来源：7-1 编程挑战
qq_小白_7
2015-10-17 11:15
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<style>
*{padding:0px;margin:0px;list-style:none;font-size:14px;}
.all{width:1000px;margin:0 auto;background-color:white;}
.logo{width:1000px;height:70px;}
.logo_left,.logo_rigjt{float:left;}
.logo_right li{float:left;width:80px;line-height:70px;text-align:center;margin:0 5px;}
.logo_right li a{display:block;text-decoration:none;font-family:"微软雅黑";color:black;font-weight:bold;}
.logo_right li a:hover{background-color:#B22222;padding:0px 6px;}
#ad{width:1000px;height:310px;}
.line{width:1000px;margin-top:25px;height:50px;}
.line_left,.line_right{float:left;}
.line_left{width:145px;background-color:#B22222;text-align:center;padding:10px 0;color:white;}
.line_right{width:845px;background-color:#444444;padding:10px 0;color:white;padding-left:10px;}
.mid{width:1000px;}
.mid li{float:left;margin-right:3px;}
.mid li p{text-align:center;border:1px solid #E8E8E8;height:25px;line-height:25px;}
.content{width:1000px;height:250px;padding-top:15px;overflow:hidden;}
.content_left,.content_mid,.content_right{float:left;width:328px;height:250px;border:1px solid #E8E8E8;}
.content_left,.content_mid{margin-right:3px;}
.content .boxup{width:width:328px;background-color:#B22222;height:30px;
line-height:30px;padding-left:10px;color:white;}
.content .date{width:30px;height:40px;float:left;background-color:#B22222;margin:4px 8px;font-size:13px;text-align:center;padding-top:5px;color:white;}
.content_left .boxdown .pp{margin:4px 4px;line-height:20px;}
.content_left .boxdown .pp p,h3{font-size:12px;}
.content_mid .boxdown{line-height:30px;margin:10px 10px;}
.content_right .boxdown{line-height:20px;margin:10px 10px;font-size:10px;}
.bottom{width:1000px;text-align:center;height:35px;background-color:#DDDDDD;line-height:35px;font-weight:bold;font-size:12px;margin-top:10px;}
</style>
<body>
<div class="all">
<div class="logo">
<div class="logo_left"> <img src="http://img.mukewang.com/53edadad0001efe202000070.jpg"></div>
<div class="logo_right">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品特色</a></li>
<li><a href="#">解决方案</a></li>
<li><a href="#">产品价格</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
<div id="ad">
<div>
<ul>
<li><a href="a"><img src="http://img.mukewang.com/53edad3e0001afad10000318.jpg"></a></li>
</ul>
</div>
</div>
<div class="line">
<div class="line_left">滚动新闻</div>
<div class="line_right">这是滚动新闻</div>
</div>
<div class="mid">
<ul>
<li><img src="http://img.mukewang.com/53edad54000119fb03300130.jpg"><p>玩转bootstrap</p></li>
<li><img src="http://img.mukewang.com/53edad690001260a03300130.jpg"><p>企业网站实战</p></li>
<li><img src="http://img.mukewang.com/53edad7a0001cde803300130.jpg"><p>javascript基础</p></li>
</ul>
</div>
<div class="content">
<div class="content_left">
<div class="boxup">新闻中心</div>
<div class="boxdown">
<div class="date">8月23日</div>
<div class="pp">
<h3>学习计划之"Android攻城狮初养成"</h3>
<p>想成为Android攻城狮?想开发一款专属App?没有任何基础的你 ,应该从何学起?</p>
</div><hr>
<div class="date">8月23日</div>
<div class="pp">
<h3>学习计划之"Android攻城狮初养成"</h3>
<p>想成为Android攻城狮?想开发一款专属App?没有任何基础的你 ,应该从何学起?</p>
</div><hr>
<div class="date">8月23日</div>
<div class="pp">
<h3>学习计划之"Android攻城狮初养成"</h3>
<p>想成为Android攻城狮?想开发一款专属App?没有任何基础的你 ,应该从何学起?</p>
</div><hr>
</div>
</div>
<div class="content_mid">
<div class="boxup">热门推荐</div>
<div class="boxdown">
幕课网2048游戏源码征集<br>
幕课网2048游戏源码征集<br>
幕课网2048游戏源码征集<br>
幕课网2048游戏源码征集<br>
幕课网2048游戏源码征集</div>
</div>
<div class="content_right">
<div class="boxup">联系我们</div>
<div class="boxdown">
联系我们<br>
讲师招募：邹同学<br>
电话：18888888888<br>
QQ:4744373X<br>
Email:4744373X@qq.com<br>
联系我们<br />
讲师招募：邹同学<br>
电话：18888888888<br>
QQ:4744373X<br>
Email:4744373X@qq.com<br>
</div>
</div>
</div>
<div class="bottom">
<p>Copyright © 2013 imooc.com All Rights Reserved 京ICP备 13046642号-2</p>
</div>
</div>
</body>
</html>
这里的border-bottom线消失，怎么改出不来
这里设置margin-top没有作用，试了padding-top做的，margin-top为什么没有用，.content{width:1000px;height:250px;padding-top:15px;overflow:hidden;}
写回答
关注
1回答
-
- Y_du
- 2015-10-17 11:37:36
因为你的.mid里面的内容是浮动的，脱离了标准文档流。所以你使用margin-top没用。那是因为.min没有高度。想使用margin-top必须先给.mid设置一个比其里面li高度高或者一致的高度即可。
企业网站综合布局实战
本课程重点介绍HTML/CSS实现常见企业网站布局的方法
157038 学习 · 2157 问题
相似问题