'remove unwanted space between body and footer

Hello i am new for css and html.. I need to remove the space between body and footer. Any help ? I want to add an image at the same lines with paragraph 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Neotic</title>

</head>

<body> 
<div>
<center><img src="{{STATIC_URL}}Neoticlogo.png" height="200" width="400"  alt="Logo"  ></center>

<center> <font face="Arial" size="14.18" color=" #587974" >Beat the markets with AI </font></center>

</div>
</br>
</br>
<div class='row' style="background: #3CB371" >
<div class="col-lg-4">

<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> Neotic is a trading support platform, that allows traders to test trading strategies and provides related trading recommendations leveraging artificial intelligence, without writing a single line of code.</p> 


 </br>
  <p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> The artificial intelligence is based on a machine learning algorithm that incorporates corporate fundamentals, historical prices and financial news</p> 


 <b> <p style=" color:#EDEDED; font-family: Arial; font-size:+10; padding-left: 90px; width:400px" align="justify"> We are upgrading our services and revamping our brand</p> </b>


</div>


  <div class="well">
   <center> <p class="text-muted" style="color:#EDEDED; font-family: Arial; font-size:+2" >©2017 Neotic. All rights reserved </p> </center>
</div>
</footer>


</body>

Image

htmlcss


Solution 1:[1]

Okay. Fist of all... Please give all of your code and use up-to-date HTML5 code...

Using the poorly written code you provided, I made a JSFiddle.

<div class="well">
   <center> <p class="text-muted" style="color:#EDEDED; font-family: Arial; font-size:+2" >©2017 Neotic. All rights reserved </p> </center>
</div>
</footer>

the div with the class well had a height of who knows what, so when I set the background color and the height at 20px, I came out with a result just like your picture.

PS: I removed the outdated center tags and added a text-align:; to the div style. I also fixed your </br> tags which were incorrect and reset them to <br/>. I also added missing starting elements like <footer> because of the </footer> in your code. Thanks to James and j08691 who pointed out that the <font> tags are also outdated. I fixed your code, but next time please check your HTML for outdated tags.

<title>Neotic</title>
<body> 
<div>
<img src="{{STATIC_URL}}Neoticlogo.png" height="200" width="400"  alt="Logo" style>

<h1 style="text-align: center;">
<font face="Arial" size="14.18" color=" #587974">Beat the markets with AI </font>
</h1>

</div>
<br/>
<br/>
<div class='row' style="background: #3CB371" >
<div class="col-lg-4">
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> Neotic is a trading support platform, that allows traders to test trading strategies and provides related trading recommendations leveraging artificial intelligence, without writing a single line of code.</p> 
 <br/>
  <p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> The artificial intelligence is based on a machine learning algorithm that incorporates corporate fundamentals, historical prices and financial news</p> 
 <b> <p style=" color:#EDEDED; font-family: Arial; font-size:+10; padding-left: 90px; width:400px" align="justify"> We are upgrading our services and revamping our brand</p> </b>
</div>
<footer>
 <div style="background-color:#333; height:20px;">
 <p style="font-family: Arial; font-size:+2; text-align:center;color:#fff;" >©2017 Neotic. All rights reserved </p>
</div>
</footer>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 InvincibleM

Related Questions