物化:如何消除div之间的空白

Question

在使用col时，‘some’之间有一些额外的空白。如何在不使用任何内联css的情况下减少这一额外空间：

看起来是这样的：

​

我想要的是：

​

我的代码:

.item-card{
    position: relative;


}
.card-lable{
    position: absolute;
    bottom: 0;
}
.max-width{
    max-width: 100%;
}

<div class="row">
  <div class="col m10 offset-m1">
    <div class="col m4 item-card" >
      <img class="max-width" src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg">
      <div class="card-lable"><h4>owl</h4></div>
    </div>
    <div class="col m4 item-card" >
        <img class="max-width" src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg">
        <div class="card-lable"><h4>owl</h4></div>
        </div>
    </div>
</div>

Answer 1

使用.offset-m1,.item-card{padding-left:0!important;}

​

.item-card{
    position: relative;
}
.card-lable{
    position: absolute;
    bottom: 0;
}
.max-width{
    max-width: 100%;
}
.offset-m1,.item-card{
padding-left:0!important;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col m10 offset-m1">
    <div class="col m4 item-card" >
      <img class="max-width" src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg">
      <div class="card-lable"><h4>owl</h4></div>
    </div>
    <div class="col m4 item-card" >
        <img class="max-width" src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg">
        <div class="card-lable"><h4>owl</h4></div>
        </div>
    </div>
</div>

​