Removing space with margin and padding not working

Question

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>

Forgot to post your HTML. We need a [mcve] in your question (not on another site) — j08691, Feb 27 '23 at 19:40

score 0 · Answer 1 · answered Feb 27 '23 at 19:48

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.

score 0 · Answer 2 · answered Feb 27 '23 at 19:48

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

Removing space with margin and padding not working

2 Answers2