中间有Div空格，如何删除？

时间：2019-01-01 01:43:03

标签： html css

我需要删除两个部分之间的空白，我已经尝试过使用负边距，但这会使网站的内容更加混乱。下面列出了代码笔以查看其外观。请帮忙！请帮忙！请帮忙！请帮忙！请帮忙！请帮忙！请帮忙！请帮忙！请帮忙！ https://codepen.io/anon/pen/WLXaVB

无负边距

 <!DOCTYPE html>
  <head>
    <link rel="stylesheet" href="main.css">
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="animate.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Passion+One:400,700,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
    <title>Maxwell Tan | Front-End Developer</title>

    <script type="text/javascript"> //<![CDATA[
var tlJsHost = ((window.location.protocol == "https:") ? "https://secure.comodo.com/" : "http://www.trustlogo.com/");
document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
//]]>
</script>




  </head>
  <body>

    <section id="header">
             <header class="site-header">
                 <div class="navbar-wrapper">
                     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="border:none;background-color: rgba(65,95,166);">
                         <div class="container">
                             <div class="navbar-header" style="">
                                  <button class="navbar-toggle"  data-target=".navbar-collapse" style="" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
                             </div>
                            <a href="index.html" style="font-family: Lato; font-weight: 300;float: left;font-weight: 300; font-size: 140%; color: white; position:absolute;left:15%;top:10px;  margin: 0px 15px 15px 0px">Maxwell Tan</a>
                             <div class="navbar-collapse collapse" style="">
                                 <ul class="nav navbar-nav navbar-right">
                                   <li><a class="zoominxs" href="#head" style="font-weight: 300; font-size: 120%; color: white;  font-family: Lato;">Home</a></li>
                                   <li><a class="zoominxs" href="#about" style="font-weight: 300; font-size: 120%; color: white; font-family: Lato;">About</a></li>
                                   <li><a class="zoominxs" href="#offer" style="font-weight: 300; font-size: 120%; color: white; font-family: Lato;">Offers</a></li>
                                   <li><a class="zoominxs" href="#dev" style="font-weight: 300; font-size: 120%; color: white; font-family: Lato;">Development & Design</a></li>
                                   <li><a class="zoominxs" href="#contact" style="font-weight: 300; font-size: 120%; color: white; font-family: Lato;">Contact</a></li>
                                 </ul>
                             </div>
                         </div>
                     </div>
                 </div>
             </header>
           </section>


               <header id="head">
                 <h1 class="animated rubberBand" style="font-size: 350%; padding-top: 300px; font-family: Fira Sans; padding-left: 15%;">The Key to becoming the next Successful Business.</h1><h2 style="padding-top: 30px; font-size: 200%; padding-bottom: 30px; padding-left: 15%; font-family: Lato; font-weight: 300;">A Stunning Website.</h2>
                 <a href="#about" style="transition-duration: 2s;"><button class="button" id="learnmore" style="margin-left: 15%;"><span style="font-weight: 600; font-family: Lato;">Learn More</span></button></a>
                 <h1 style="margin-top: 100px;"></h1>
               </header>

    <section id="about" style="background-color: #415FA6; width: 100%; padding: 0; margin: 0;">
      <h1 class="title"style="font-size: 300%; margin-bottom: 0;font-family: Lato; text-align: center; color: white; font-weight: 600; font-family: Fira Sans; padding-top: 50px;">HMM.. DON'T YOU WANT TO <br>GET TO KNOW ME FIRST?</h1>
        <center><img id="logo" style="padding-top: 50px;" alt="Maxy" width="250" style="padding: 0; margin: 0;" src="img/logo.png"></img></center>
        <p style="text-align: center; color: white; padding-top: 50px; font-size: 130%; font-family: Fira Sans; font-weight: 100;">Hey there, I am Maxwell Tan my online alias being Maxey.<br>I am a 14 year old and have been studying Front-End Website Development for 4 years.</p>
        <p style="text-align: center; color: white; padding-top: 30px; padding-bottom: 10px; font-size: 130%; font-family: Fira Sans; font-weight: 100;">Outside of Website Development, <br>I enjoy playing Fortnite, doing Martial Arts, and streaming on Twitch.</p>
        <center><a href="https://twitch.tv/maxystreams" style="transition-duration: 2s;"><button class="button" id="twitch"><span style="font-weight: 600; font-family: Lato;">Check out my Twitch Channel</span></button></a></center>
        <h3 style="padding-bottom: 30px;"></h3>
    </section>


    <section id="offer" style="  margin-top: -30px; padding-bottom: 100px;">
      <h1 class="title" style="font-size: 300%; padding-top: 100px; font-family: Fira Sans; font-weight: 600; color: #415FA6; text-align: center; ">WHAT CAN I OFFER?</h1>
      <div style="text-align: center;">
        <div class="col-sm-4" style="margin-top: 80px; margin-bottom: 50px"><img  class="zoominsmall" src="img/design.png" height="120" width="120"><h3 style="font-weight: 200; font-family: Fira Sans;">Sleek Design</h3></div>
        <div class="col-sm-4" style="margin-top: 80px; margin-bottom: 50px"><img class="zoominsmall" src="img/html.png" height="120" width="120"><h3 style="font-weight: 200; font-family: Fira Sans;">Clean Code</h3></div>
        <div class="col-sm-4" style="margin-top: 80px; margin-bottom: 50px"><img class="zoominsmall" src="img/satisfaction.png" height="120" width="120"><h3 style="font-weight: 200; font-family: Fira Sans;">Customer Satisfaction</h3></div>
      </div>
    </section>


    <section id="dev" style=" margin-top: 200px;background-color: #415FA6;">
      <h1 class="title" style="font-size: 300%; padding-top: 100px; font-family: Fira Sans; font-weight: 600; color: white; text-align: center;">WEBSITE DEVELOPMENT & DESIGN</h1>
      <p style="text-align: center;padding-top: 50px;color: white; font-family: Fira Sans; font-weight: 100; font-size: 150%; padding-bottom: 10px;">Having trouble growing a business you know has <b>potential</b>? <br>This is what I am here for. I offer <b>Professional</b> Website Development and a <b>Stunning Design</b> to <b>attract</b> many clients towards your business. <br>What are you waiting for?</P>
      <center><a href="#contact" style="transition-duration: 2s;"><button class="button" id="twitch"><span style="font-weight: 600; font-family: Lato;">Get a Free Quote</span></button></a></center>
      <h1 style="padding-bottom: 50px;"></h1>
      </section>


    <section id="contact">


          <h1 class="title" style="font-size: 300%; padding-top: 100px; font-family: Fira Sans; font-weight: 600; color: #415FA6; text-align: center; margin: 0;">Let's get in touch, I'm always up for a conversation!</h1>
        <div style="text-align: center;">
          <div class="col-md-4" onclick="alert('Hey there! Feel free to contact me on Discord @ Maxy#4414.');" style="margin-top: 100px;  padding-bottom: 120px;"><img src="img/discord.png" class="zoominsmall" style=" height: 80px;"></img><h3 style="font-family: Fira Sans;color: black; font-weight: 300;">Discord</h3></div>
          <a href="mailto:max@mwstan.com"><div class="col-md-4" style="margin-top: 100px;  padding-bottom: 120px;"><img class="zoominsmall" src="img/email.png" style="height: 80px; width: 80px;"></img><h3 style="font-family: Fira Sans;color: black; font-weight: 300;">E-mail</h3></div></a>
          <a href="https://www.instagram.com/maxtan18"><div class="col-md-4" style="margin-top: 100px;  padding-bottom: 120px;"><img class="zoominsmall" src="img/instagram.png" style="height: 80px; width: 80px;"></img><h3 style="font-family: Fira Sans;color: black; font-weight: 300;">Instagram</h3></div></a>
        </div>

        <h1 style="color: black; margin: 0; padding: 0; font-family: Fira Sans; font-weight: 400; font-size: 130%; text-align: center; padding-top: 100px;">Copyright © 2018 Maxwell Tan. All Rights Reserved.</h1>
        <h2 style="color: black; margin: 0; padding: 0; font-family: Fira Sans; font-weight: 400; font-size: 130%; text-align: center; padding-top: 5px; ">Website designed by Maxwell Tan</h2>
        </section>



        <center><script language="JavaScript" type="text/javascript">
    TrustLogo("http://mwstan.com/img/comodo.png", "CL1", "none");
    </script></center>

    </body>




</html>

1 个答案:

答案 0 :(得分：0)

问题是您的样式被覆盖，并且引导程序在英雄下面的部分中的margin-top: 20px元素中添加了h1

enter image description here

margin-top 20px

将此添加到您的CSS 

h1.title {
  margin-top: 0;
}
相关问题
最新问题