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

Question

I have a simple grid but the problem is its showing too much space on top of images.
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%;
}
}
}
As you can see in image i add black lines on space i need to remove this space or add little space like 4 5px.

Answer 1

You just need to remove margin top and the bottom on ion-card.
Change this to:
ion-row{
ion-card{
width:100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
matgin-top: 0 !important;
img{
width:100%;
}
}
This:
ion-row{
ion-card{
width:100% !important;
margin: 0 !important; // I also dont think important is neccesary
img{
width:100%;
}
}