ionic 4 ion-col 在 iphone x 中显示太多 space

Question

我有一个简单的网格，但问题是它在图像顶部显示了太多 space。

html

<ion-grid style="height: 100%">
  <ion-row class="ion-align-items-center ion-justify-content-center">
    <ion-col size="6" *ngFor="let x of data" >
      <ion-card class="card-img" (click)="detail()">
          <img src="../../assets/img/demo.jpg" >
          <div style="text-align: center;" class="boxe">
          <ion-icon name="checkmark" class="tick" color="medium"></ion-icon>
          <ion-icon name="close" class="cross" color="dark"></ion-icon>
        </div>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

scss

.card-img{
  border-radius: 10px;
}

.tick{    
  text-align:center;
  font-size: 30px; 
}
.cross{    
  text-align:center;
  font-size: 30px;
}

ion-card{
  margin: 0px

  img{
    width:100%;
  }
}

.no-shadow{
  box-shadow: none !important;
}


ion-row{
    ion-card{
        width:100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    matgin-top: 0 !important;
    img{
        width:100%;
    }
}
}

正如您在图像中看到的那样，我在 space 上添加了黑线，我需要删除此 space 或添加一些 space，例如 4 5px。

Answer 1

您只需删除 ion-card 上的顶部和底部边距。

将其更改为：

ion-row{
    ion-card{
        width:100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    matgin-top: 0 !important;
    img{
        width:100%;
    }
}

这个：

ion-row{
    ion-card{
    width:100% !important;
    margin: 0 !important; // I also dont think important is neccesary
    img{
        width:100%;
    }
}

ionic 4 ion-col 在 iphone x 中显示太多 space

ionic 4 ion-col showing too much space in iphone x

ionic-framework

ionic4