css - 删除行之间的空格

Question

我在行和它们之间的空间方面遇到了一个小问题。另一方面，我也尝试设置图像以填充(相同大小)初始主页(带有导航栏和标签页)。

screenshot

和我现在的代码:页面.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>

页面.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

也许您还没有使用过 reset css。请为图像添加此 css，因为此空间来自 img 默认样式。

或者我会建议使用全局 reset

或者您可以使用 eric meyer reset

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