删除行之间的底部填充实现

Question

我遇到了materializecss中两行之间填充的问题

填充问题

我想删除底部填充。使用下一个代码，我可以删除左边和右边的代码：

<div class="col s12 m5 white no-padding">

    <div class="row center-align white"><a href="acercade.html"><img src="imagenes/IMG BOTONES-01.jpg" class="responsive-img"></a></div>
    <div class="row center-align white"><a href="transparencia.html"><img src="imagenes/IMG BOTONES-02.jpg" class="responsive-img"></a></div>

</div>

但它没有影响顶部或底部。

Answer 1

写一个单独的课程

.no-padding-bottom {padding-bottom:0px !important}

在div上包含该类，您需要移除paddding

<div class="col s12 m5 white no-padding no-padding-bottom">

<div class="row center-align white"><a href="acercade.html">
  <img src="imagenes/IMG BOTONES-01.jpg" class="responsive-img"></a>
</div>
<div class="row center-align white"><a href="transparencia.html">
  <img src="imagenes/IMG BOTONES-02.jpg" class="responsive-img"></a>
</div>

</div>

重要标签是强制性的！

Answer 2

所以我用height: 150px !important;放了一个CSS类，它完全有效：

<div class="white col s12 m4 l2 no-padding">
<div class="no-padding-up-down fix-margin"><a href="acercade.html" class="fix-margin"><img src="imagenes/IMG BOTONES-01.jpg" class="responsive-img image-fit"></a></div>
<div class="no-padding-up-down fix-margin"><a href="acercade.html" class="fix-margin"><img src="imagenes/IMG BOTONES-02.jpg" class="responsive-img image-fit"></a></div>
<div class="no-padding-up-down fix-margin"><a href="acercade.html" class="fix-margin"><img src="imagenes/IMG BOTONES-03.jpg" class="responsive-img image-fit"></a></div>

.fix-margin {
height: 150px !important;

}

请注意，我必须在div类中使用它，而不使用'row'和<a href=...>

Answer 3

.row {
    margin-bottom: 0 !important;
}