There seems to be an issue with applying equal padding to the top and bottom of a div. Interestingly, resizing the browser window results in the padding being applied equally.
I've set the padding to 50px for the top and 0px for the bottom on a div, but it's not being distributed evenly.
div.banners {
padding: 50px 0px;
margin: 0px 0px;
background-color: #f60;
}
div.banners-third {
width: 30%;
margin-right: 5%;
float: left;
text-align: center;
}
div.banners-third-last {
margin: 0px;
}
@media screen and (max-width: 820px) {
div.banners-third {
width: 47.5%;
}
div.banners-third-second {
margin: 0px;
}
div.banners-third-last {
padding: 20px 0px 0px;
width: auto;
clear: both;
float: none;
}
}
@media screen and (max-width:720px) {
div.banners-third {
width: 33%;
margin-top: 25px;
}
div.banners-third-last {
padding: 0px 0px 0px;
width: auto;
clear: both;
float: none;
}
div.banners-mobile-collapse {
width: auto;
margin-right: 0px;
float: none;
}
}<DIV class="banners">
<DIV class="banners-third banners-mobile-collapse">
<h2>Banner 1</h2>
</DIV>
<DIV class="banners-third banners-third-second banners-mobile-collapse">
<h2>Banner 2</h2>
</DIV>
<DIV class="banners-third banners-third-last">
<h2>Banner 3</h2>
</DIV>
</DIV>I anticipated that the 50px padding would be uniformly applied to the bottom of the div.