Ionic框架中如何自定义/移除ion-row之间的间距

嘿，我来帮你搞定这个行间距的问题！你遇到的这个情况，主要是因为Ionic的ion-row组件默认自带了外边距（margin），另外第三行里的<p>标签也可能有默认的间距，咱们一步步来解决：

第一步：定位间距来源 #

1. Ionic默认样式：ion-row组件默认会有margin-bottom（比如Ionic 3中是1rem），这是行与行之间间距的主要原因。
2. 内部元素默认样式：你第三行里的<p>标签，浏览器默认会给它加上margin-top和margin-bottom，这也会额外增加间距。

第二步：具体解决方案 #

方案一：给目标行添加自定义类（最稳妥的方式）

这种方法不会影响其他行的样式，只针对你需要调整的第二行和第三行：

1. 修改你的HTML代码，给第二行和第三行分别添加自定义类：

<ion-content padding> 
  <ion-row> 
    <ion-label> I am good I do not want any space.</ion-label> 
  </ion-row> 
  <!-- 给第二行添加类：remove-bottom-margin -->
  <ion-row class="remove-bottom-margin"> 
    <div > 
      <div class="inner"> 
        <ion-label *ngIf="!inverse" no-margin>1 USD = 67 INR</ion-label> 
        <ion-label *ngIf="inverse" no-margin>1 INR = {{(1/67) | number }} USD </ion-label> 
      </div> 
      <button (click)="inverse=!inverse" ion-button clear class="iconWidth" color="dark"> 
        <ion-icon name="swap" class="rotate"></ion-icon></button> 
    </div> 
  </ion-row> 
  <!-- 给第三行添加类：remove-top-margin -->
  <ion-row class="remove-top-margin"> 
    <p>Can you help me to get rid of space between this row and above</p> 
    <ion-label> Thanks</ion-label> 
  </ion-row> 
</ion-content>

2. 在你的SCSS代码中添加对应的样式：

page-home { 
  .rotate { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
    margin-bottom: 15px; 
  } 
  .inner{ 
    display: inline-block; 
    width:70%; 
  } 
  .iconWidth{ 
    width:20%; 
  }

  // 新增：移除第二行的底部外边距
  .remove-bottom-margin {
    margin-bottom: 0 !important;
  }

  // 新增：移除第三行的顶部外边距
  .remove-top-margin {
    margin-top: 0 !important;
  }

  // 新增：移除第三行中p标签的默认顶部间距
  .remove-top-margin p {
    margin-top: 0;
  }
}

方案二：用CSS选择器直接定位（适合结构固定的情况）

如果你的HTML结构不会轻易改变，可以不用加自定义类，直接通过子元素选择器定位：

page-home { 
  // 你的现有样式...

  // 定位第二行（第2个ion-row），移除底部外边距
  ion-row:nth-child(2) {
    margin-bottom: 0 !important;
  }

  // 定位第三行（第3个ion-row），移除顶部外边距
  ion-row:nth-child(3) {
    margin-top: 0 !important;
  }

  // 移除第三行里p标签的默认顶部间距
  ion-row:nth-child(3) p {
    margin-top: 0;
  }
}

小提示 #

• 如果你不想完全移除间距，只是想缩小，可以把0改成你需要的数值，比如5px。
• !important是为了确保我们的样式能覆盖Ionic的默认样式，如果去掉后样式生效，就可以不用加哦。

内容的提问来源于stack exchange，提问作者Gautam