填充没有被同等应用[重复]答案

【问题标题】：Padding is not being applied equally [duplicate]填充没有被同等应用[重复]
【发布时间】：2020-01-25 22:11:55
【问题描述】：

div 上的顶部和底部填充没有被平等地应用。但是，当您更改浏览器窗口的大小时，内边距会同样应用。

我添加了填充：50px 0px;在一个 div 上，但它没有被平等地应用。

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>

我希望将 50px 应用于 div 的底部。

【问题讨论】：

也许您的无效 HTML 是问题所在。
@EternalHour 我修复了结束标签。
@Ike Evens 运行 sn-p，看起来周围有 50px。
@BugsArePeopleToo - 但是这样做是否解决了问题？出于这个原因，需要小心更改问题中的错误。
你没有清除媒体查询之外的浮动

标签： css padding

【解决方案1】：

只需在div.banners 中使用display:flex

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>

【讨论】：

【解决方案2】：

亲爱的，如果我理解你的疑问，你想垫底吗？如果是这样也尝试使用；

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

从我看到的应该是工作；看看是否没有其他类干扰浏览器。

【讨论】：