2-11编程问题

主体部分用的上内边距还是上外边距使它在头部的下面，用上外边距的话会导致body下移，我用上内边距感觉好别扭。而且主体部分用高度后，比例缩小时会导致下面出现空白。另外老师帮忙看看代码有什么不足的地方。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style> *{
  padding: 0;
  margin: 0;
 }
  .nav{
   width: 100%;
   height: 100px;
   background: #000;  
   line-height: 100px;
   min-width: 770px;
   position: fixed;
   top: 0;
   left: 0;
  }
  .logo{
   float: left;
   cursor: pointer;
   height: 100px;
  }
  .list{
   float: right;
   color: white;
   font-size:16px;  }
  .list span{
   margin-right: 20px;
   margin-left: 20px;
   cursor: pointer;
  }
  .content{
   
   width: 100%;
   background: #8bc;
   height: 535px;
   padding-top: 100px;
   min-width: 300px;  }
  .left{
   
   width: 30%;
   margin: 50px 0 0 5%;
   float: left;
   height: 485px;
  
  }
  .left span{
   background: pink;
   margin-right: 10px;
  }
  .left p{
   margin-top: 20px;
   
  }
  .middle{
   
   width: 20%;
   margin: 50px 0 0 5%;
   float: left;
   height: 485px;
  }
  .line{
   height: 535px;
   width: 3px;
   background: orange;
   float: left;
  }
  .right{
   
   width: 29%;
   margin: 50px 5% 0 5%;
   float: right;
   height: 485px;
  
  }
  .right p{
   margin-top: 20px;
  }
  .right p input{
   width: 250px;
   height: 30px;
  }
  p input.submit{
   background: red;
   border: none;
   width: 254px;
   height: 34px;
   color: #fff;
  }
  .middle p{
   margin-top: 20px;
  }
  .footer{   width: 100%;
   height: 100px;
   background: #000;
   min-width: 800px;
   position: fixed;
   bottom: 0;
   line-height: 100px;
  }
  .footer span{
   color: #fff;
   font-size: 16px;
   margin-left: 10px;
   margin-right: 10px;
   cursor: pointer;  }
  .pre{
   width: 600px;
   margin: 0 auto;
  }
 </style>
</head>
<body>
 <div class="nav">
  <div class="logo">
   <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="logo">
  </div>
  <div class="list">
   <span>课程</span>
   <span>职业路径</span>
   <span>实战</span>
   <span>猿问</span>
   <span>手记</span>
  </div>
 </div>
 <div class="content">
  <div class="left">
   <h2>课程推荐</h2>
   <p><span>职业路径</span> HTML与CSS3实现动态网页</p>
   <p><span>职业路径</span> 零基础入门Android语法与界面</p>
   <p><span>职业路径</span> IOS基础语法与常用控件</p>
   <p><span>职业路径</span> PHP入门开发</p>
   <p><span>职业路径</span> JAVA入门开发</p>
  </div>
  <div class="middle">
   <h2>相关课程</h2>
   <p>HTML &nbsp;CSS  &nbsp;JavaScript</p>
   <p>HTML5 &nbsp;CSS3  &nbsp;Jquery</p>
   <p>移动端基础  &nbsp;移动端APP开发</p>
  </div>
  <div class="line"></div>
  <div class="right">
   <h2>登陆</h2>
   <form action="">
    <p><input type="text" placeholder="请输入登陆邮箱/手机号"></p>
    <p><input type="text" placeholder="6-11位密码，区分大小写，不能有空格"></p>
    <p><input class="submit" type="submit" value="登陆"></p>
   
   </form>
  </div>
 </div>
 <div class="footer">
  <div class="pre">
   <span>网站首页</span>
   <span>企业合作</span>
   <span>人才招聘</span>
   <span>联系我们</span>
   <span>常见问题</span>
   <span>友情链接</span>
  </div>
 </div>
</body>
</html>

宝慕林3319090 2017-08-16

源自：CSS网页布局基础 2-12 编程练习