Removing space between two divisions in HTML& CSS

Question

Actually, I am having some unusual space between my two divisions name implementing classes as footer and content. I am quite new to this so please help me.

The style tag inside the head.

<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>

The body of my code is

<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>

I know that I have pasted the whole code but I am not able to figure out where may be the problem is.

`overflow:auto` on footer will fix the issue – Temani Afif Jun 01 '18 at 10:31 — Temani Afif, Jun 01 '18 at 10:31

score 1 · Accepted Answer · answered Jun 01 '18 at 10:27

1

Its because you have h1 element in footer and it takes margin-top and margin-bottom by default. So you need to remove it. Try this code.

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

.footer h1 {
  margin-top: 0;
}

answered Jun 01 '18 at 10:27

Aryan Twanju

2,464
1
9
12

Thanks, I really appreciate it. It worked. Also, I have space between the line (colored line ) and div having class content can you please help me. – Jun 01 '18 at 10:34
You need to add `display:block` property to the your `img`. Try this. – Aryan Twanju Jun 01 '18 at 10:48
Thanks that also worked but I can't understand. Can you please elaborate/ explain it to me. – Jun 01 '18 at 10:50
`img` element takes little space below itself by default. but it we marked it as block element with `display:block` property, that space is removed. – Aryan Twanju Jun 01 '18 at 10:52

Removing space between two divisions in HTML& CSS

1 Answers1