删除行之间的空格

Question

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

screenshot

和我现在的代码： 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

可能你还没有使用过重置css。请为图像添加此 css，因为此 space 来自 img 默认样式。

或者我会建议使用全局 reset

或者您可以使用 eric meyer reset

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

删除行之间的空格

Remove spaces between rows

css

col

ionic-framework