Why add padding to the main div and not its parent div, wrap?

Here is the simple html:

<div id="wrap">

<div id="main">

</div>

</div>

<div id="footer">

</div>

Here's the css:

* {margin:0;padding:0;} 

 html, body {height: 100%;}

 #wrap开发者_如何学Go {min-height: 100%;}

 #main {overflow:auto;
    padding-bottom: 150px;}

 #footer {position: relative;
    margin-top: -150px; 
    height: 150px;
    clear:both;}

My question is wouldn't it make more sense to add the padding-bottom to the #wrap div and not the it's #main div?

In case your wondering, this is relating to the footer being always at the bottom and not overlapping its previous content when resizing the page.

I'm guessing you might get into trouble with the box model there, since the padding would add to the height of the #wrap — Have you tried it out?