Remove spaces between rows

Question

Im facing a little issue with rows and the space between of them. On the other hand, im try too setup the images to filled (in the same size) the initial home page (with navbar and tabspage).

screenshot

and my code for now: page.html

<ion-content>
  <ion-row>
    <ion-col no-padding (click)="openPage1()">
      <p class="image-title">1</p>
      <img  src="assets/imgs/2560x1440.png" />
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col no-padding (click)="openPage2()">
      <p class="image-title">2</p>
      <img  src="assets/imgs/2560x1440.png" />
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col no-padding (click)="openPage3()">
      <p class="image-title">3</p>
      <img  src="assets/imgs/2560x1440.png" />
    </ion-col>
  </ion-row>
</ion-content>

page.scss:

page-tests1 {
}
  ion-row {
    text-align: center;
  }
  .image-title {
    position: absolute;
    top: 25%;
    font-size: 2em;
    width: 100%;
    font-weight: bold;
    color: white;
  }

Answer 1

Maybe you haven't use reset css. Please add this css for image because this space from img default style.

Or i will suggest to use global reset

or you can use eric meyer reset

img {
    display: inline-block;
    vertical-align: middle;
}