'why does "padding-bottom" make room between footer and div when "margin-bottom" does not?

Note, I'm fairly new to HTML/CSS but I am aware of the box-model and what the difference between margin and padding is, thus that is not my question.

I have a page where I have a footer at the bottom and three divs. I want some space to be between the last div and my footer, thus I have create a class .last which sets margin-bottom:100px (for testing) and I use that in the last div. But that does not change anything (the footer and the last div still overlaps) but setting padding-bottom:100px creates a lot of space, as wanted.

Thus I wonder; why doesn't margin create some space?

Please find below the CSS and HTML (I have tried removing unsused stuff in the HTML to get an easy overview, thus some there might be some closing/opening tags that don't align, which might be due to that)

*{margin:0;
padding:0;
box-sizing: border-box;}


html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}


.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 10vh;
    background-color: #bdbdbd; /* #bdbdbd */
}

table{
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 50px 0;
}
@media only screen and (orientation: landscape) {

.footer{
    min-height: 15vh;
    background-color: blueviolet;
}

}
body .main{
    margin-bottom: 10vh;
    
}

.last {
    padding-bottom: 15vh;
}

body p{
    font-size:medium;
    margin:2vh 2vw;
    text-align: left;
}

h1{
    font-size: x-large;
}

table td{
    font-size: small;
    white-space: nowrap;
}


<link rel="stylesheet" type="text/css" href="{% static 'app/about.css' %}">

<body>
.
.
.
  <div class="main last">
    
    <h3> Title?</h3>
    <p>
Some stuff
    <br> 
    some more stuff
    
    </p>
  </div>

  <div class="footer">
    <div id="contact-info">
      <table>
        <tr>
          <th>contact</th>
      </table>
    </div>
  </div>
</body>

{% endblock content %}
htmlcss


Sources

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

Source: Stack Overflow

Solution Source

Related Questions