Question

实际上，我在两个部门之间有一些不寻常的空间，将类实现为页脚和内容。我是新手，所以请帮助我。

头部内的样式标签。

<style type="text/css">
    .heading{color: white;
            font-family: serif;
            font-size: 100px;}
    .center{position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            text-align: center;}
    .footer{background-color: #1f2326; 
            width: 100%;
            text-align: center;}
    ul {list-style-type: none;
        margin-top: 30px;}

    li {float: left;}

    li a{padding: 16px;}
    .image{width: 40px;
           height: 40px;}
    .centerimage{text-align: center;
                 display: inline-block;}
    .content{height: 50%;
            padding-top: 60%;
            background-color: #1f2326;}
</style>

我的代码正文是

<body background="black.png" >

<div class="center"  style="height: auto; ">    
    <h1 class="heading">Parag Singh<p style="font-family: serif; font-size: 
  30px; color: white; text-align: center;">"Web and App Developer"</p></h1> 
<br><br>
    <center>
    <img src="mouse.png" width="80" height="80">
    </center>
</div>


<img src="line.jpg" style="width: 100%; margin-top: 50%;">


<div class="content">
    <p style="color: white">hello</p>   
</div>



<div class="footer">
<footer>
    <h1 style="font-family: serif; color: white; font-size: 80px; padding- 
 top: 80px">I'd Love to talk</h1>
    <p style="font-family: serif; color: white; font-size: 25px">If you have 
  any query and want to contact me</p>
    <a href="mailto:psparag1997@gmail.com"><img src="mail-128.png" 
   style="width: 60px; height: 60px"></img></a>
    <p style="color: white; font-family: serif; font-size: 20px">I'm also 
    active on social media platforms.</p>
    <ul class="centerimage">
        <li><a href="https://www.linkedin.com/in/parag-singh-28a567154/"> 
   <img src="twitter-128.png" class="image"></a></li>
        <li><a href="https://www.instagram.com/parag_singh/"><img 
    src="instagram-128.png" class="image"></a></li>
        <li><a href="https://www.facebook.com/psparagsingh"><img 
    src="facebook-3-128.png" class="image"></a></li>
        <li><a href="https://twitter.com/ParagSi66886580"><img 
    src="linkedin-3-128.png" class="image"></a></li>
    </ul>
    <p style="color: white; text-align: center; font-family: serif; font- 
    size: 20px">Hand crafted in India by Parag Singh </p>
    <img src="capture.jpg" style="width: 100% ; bottom: 0px; margin-top: 
        40px ">

    </footer>
  </div>

 </body>
 </html>

我知道我已经粘贴了整个代码，但我无法弄清楚问题出在哪里。

Answer 1

这是因为页脚中有h1个元素，默认情况下需要margin-top和margin-bottom。所以你需要删除它。试试这段代码。

.content {
  height: 50%;
  padding-top: 60%;
  padding-bottom: 40px;
  background-color: #1f2326;
}

.footer h1 {
  margin-top: 0;
}

在HTML和＆amp ;;中删除两个部门之间的空间CSS

1 个答案: