Question

我想问一下我的html中div之间的空格。 .container和.main之间总是有空格。有谁能解释为什么？例如：我想将h1文本“MOVE”移动到页面顶部（没有空格）。

非常感谢，

以下是代码： HTML

html, body {
            margin: 0;
          }
    
          h1, h2, a {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
          }
    
          p {
            font-family: Helvetica, Arial, sans-serif; 
          }
    
          .container {
            max-width: 940px;
            margin: 0 auto;
          }
         h1 {margin: 0;}
          /* Main */
          .main {
            text-align: center;
            background: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg) no-repeat center center;
            background-size: cover;
            height: 600px;
          }
    
          .main .container {
            position: relative;
            top: 100px;
          }
    
          .main h1 {
            color: #fff;
            margin: 0;
            font-size: 150px;
          }
    
          .main p {
            color: #fff;
            margin: 0 0 20px 0;
            font-size: 18px;
          }
    
          .main .btn {
            background-color: #1c1c1c;
            color: #fff;
            font-size: 18px;
            padding: 8px 30px;
            text-decoration: none;
            display: inline-block;
          }
    
          /* Supporting */
          .supporting {
            background-color: #1c1c1c;
            text-align: center;
            padding: 50px 0 80px;
          }
    
          .supporting .col {
            float: left;
            width: 28%;
            padding: 10px;
          }
    
          .supporting h2 {
            color: #ffa800;
            font-size: 20px;
            margin-bottom: 10px;
          }
    
          .clearfix {
            clear: both;
          }
    
          .supporting p {
            color: #efefef;
            margin-bottom: 20px;
            line-height: 20px;
            font-size: 12px;
          }
    
          .supporting .btn {
            background-color: #eee;
            color: #1c1c1c;
            font-size: 18px;
            padding: 8px 30px;
            text-decoration: none;
            display: inline-block;
          }
    
          /* Feature */
          .feature {
            background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg) no-repeat center center;
            background-size: cover;
            height: 600px;
            text-align: center;
          }
    
          .feature .container {
            position: relative;
            top: 200px;
          }
    
          .feature h2 {
            color: #fff;
            font-size: 40px;
            margin:0;
            padding:50px 0 0;
    
          }
    
          /* Footer */
          .footer {
            background: url(https://s3.amazonaws.com/codecademy-    content/projects/move/footer.jpg) no-repeat center center;
            background-size: cover;
            height: 600px;
            text-align: center;
          }
    
          .footer .container {
            position: relative;
            top: 200px;
          }
    
          .footer h2 {
            color: #fff;
            font-size: 40px;
            margin: 0 0 20px 0;
            padding:50px 0 0;
          }
    
          .footer p {
            color: #fff;
            margin: 0 0 20px 0;
            font-size: 18px;
          }
    
          .footer .btn {
            background-color: #1c1c1c;
            color: #fff;
            font-size: 18px;
            padding: 8px 30px;
            text-decoration: none;
            display: inline-block;
          }
    
          a.btn:hover {
            background:#ffa800;
            color:#000;
          }
    
          @media (min-width:600px) {
            .main h1 {
              font-size: 200px;
            }
    
            .supporting .col {
              width: 30%;
            }
    
            .supporting h2 {
              font-size: 40px;
            }
    
            .supporting p {
              font-size: 14px;
            }
    
            .feature h2 {
              font-size: 60px;
            }
          }

<div class="container">
            <h1>Move</h1>
            <p>Form healthy habits to take your fitness to the next level.</p>
            <a class="btn" href="#">Start Now</a>
          </div>
        </div>
    
        <div class="supporting">
          <div class="container">
            <div class="col">
              <h2>Move</h2>
              <p>Become more active by tracking your runs, rides, and walks.</p>
            </div>
            <div class="col">
              <h2>Sync</h2>
              <p>Access your activity on your phone, tablet, or computer.</p>
            </div>
            <div class="col">
              <h2>Compete</h2>
              <p>Set personal challenges and see how you rank against your friends.</p>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
    
        <div class="feature">
          <div class="container">
            <h2>Move. Rest. Recover. Move.</h2>
          </div>
        </div>
    
        <div class="supporting">
          <div class="container">
            <h2>Go Premium</h2>
            <p>Receive recommendations based on your activity to level up.</p>
            <a class="btn" href="#">Learn More</a>
          </div>
        </div>
    
        <div class="footer">
          <div class="container">
            <h2>Stop scrolling. Start moving</h2>
            <a class="btn" href="#">Start Now</a>
          </div>
        </div>

Answer 1

您的H1代码可能有一些上边距，使您的.container div被推离.main div。

您可以通过从H1标记中删除上边距来解决此问题。

h1 {
    margin-top:0;
}

Answer 2

可能是浏览器的默认设置，你应该考虑使用HTML重置样式表。对于某些示例，请阅读Which HTML5 reset CSS do you use and why?。

div之间的空间？

2 个答案: