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

【问题标题】：Remove bottom padding between rows materialize删除行之间的底部填充实现
【发布时间】：2018-02-05 20:44:26
【问题描述】：

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>

但它不影响顶部或底部。

【问题讨论】：

标签： css material-design materialize

【解决方案1】：

所以我用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 类和 <a href=...> 中使用它

【讨论】：

【解决方案2】：

写一个单独的类

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

在你需要删除填充的 div 中包含该类

<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>

重要的标签是强制性的！

【讨论】：

没用，没影响，我之前真的试过了
那么我认为它实际上不是填充可能是边距再次检查...如果您在 Google chrome 检查元素边距将显示为橙色而填充将显示为绿色...

【解决方案3】：

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

【讨论】：