Question 44757 in Html Question posted in
Some basic documentation can be found here.

Removing space with margin and padding not working – Html

How do I remove the space between the bottom of this codepen and the footer div. I have tried the suggestion on this SO post but that doesn’t seem to work. Thank you.

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: grey;
  bottom: 0;
  margin: 0;
}

.container {
  height: 2000px;
  background-color: white;
}

.footer {
   position: relative;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: green;
   color: white;
   text-align: center;
  margin: 0;
}
<div class="container">
  <div class="row">
    <div class="col-12">
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Footer</p>
</div>
Tags:

2

Answers


  1. 0

    You are setting the height of the .container div to 2000px. Because you don’t have enough content in div to fill that space, it looks like there is an empty space between the container and the footer.

    If you remove height: 2000px; from the ".container" css, it will remove the extra space.

    Login or Signup to reply.
  2. 0

    change the container height from 2000px to 100% (or remove it altogether). In general, if you want things to fit together proportionally or fill up spaces, avoid static units like pixel and use dynamic units like % or vw or vh. You can read more about them here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search