ionic 4 ion-col 在 iphone x 中显示太多空间答案

【问题标题】：ionic 4 ion-col showing too much space in iphone xionic 4 ion-col 在 iphone x 中显示太多空间
【发布时间】：2020-04-13 10:33:49
【问题描述】：

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

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%;
    }
}
}

正如您在图像中看到的那样，我在空间上添加了黑线，我需要删除这个空间或添加像 4 5px 这样的小空间。

【问题讨论】：

投票理由？

标签： ionic-framework ionic4

【解决方案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%;
    }
}

【讨论】：