自定义或删除离子行之间的空间

Posted 2023-03-05

【中文标题】自定义或删除离子行之间的空间

【英文标题】：Customize or remove space between ion row

【发布时间】：2018-10-22 12:39:12

【问题描述】：

我正在学习 Ionic 应用程序。我被介绍到 Grid 的东西，但是，我被困在删除/修改行之间的空格（行号 2 和 3），如下面的屏幕截图所示：

我的 html 中有以下代码：

<ion-content padding>
    <ion-row>     
      <ion-label> I am good I do not want any space.</ion-label>
    </ion-row>
  <ion-row>
    <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>
<ion-row>
  <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>

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%;
    

如何自定义第 2 行和第 3 行之间的间距？

【参考方案1】：

使用否定的margin-top

html

<ion-row class="bottomRow">
  <p>Can you help me to get rid of space between this row and above</p>

scss

 .bottomRow

  margin-top: -20px;

Stackblitz Example

【参考方案2】：

对我有用的是进入标签，将其与class="foo" 链接，然后设置.foopadding:0px

【参考方案3】：

尝试像这样使用no-padding 和no-margin 以及其他你想要关闭的人

  <ion-row no-padding>
  <p no-margin>Can you help me to get rid of space between this row and above</p>
  <ion-label> Thanks</ion-label>

或

 .inner
  display: inline-block;
  width:70%;
  margin-bottom: 0px;