Padding is not being applied equally

Question

Top and Bottom Padding on a div is not being applied equally. However, when you change the size of the browser window the padding is applied equally.

I've added padding: 50px 0px; on a div but it is not being applied equally.

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 expected the 50px to be applied to the bottom of the div.

@Ike Evens run the snippet, looks like there is 50px all around. — BugsArePeopleToo, Sep 25 '19 at 17:01
@BugsArePeopleToo - But in doing so did you fix the issue? Need to be careful about changing errors in a question for this reason. — EternalHour, Sep 25 '19 at 17:13

score -1 · Answer 1 · answered Sep 25 '19 at 16:59

My dear, if I understand your doubt, do you want to pad down? If so try to use too;

div.banners {
  padding: 50px 0px;
  margin: 0px 0px;
  background-color: #f60;
  padding-bottom: 50px !important;
}

From what I saw is supposed to be working; See if there is no other class disrupting the browser.

score -1 · Answer 2 · answered Sep 25 '19 at 17:09

Just use display:flex in div.banners

div.banners {
  display:flex;
  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>

Padding is not being applied equally

2 Answers2