如何去除离子项目周围的填充？

Question

我想从我的 ion-item 中删除 padding 以便它可以占据页面的完整 width 。

请在开发工具中查看离子项周围的 padding 。

 <ion-content padding>
  <ion-list>
    <ion-item>
      <ion-thumbnail>
        <img class="imgmg" src="...">
      </ion-thumbnail>
      <h2>Text</h2>
    </ion-item>
  </ion-list>
</ion-content>

离子项目有 16px 的填充，当我检查离子项目时，也在 class=“scroll-content” 上，我在检查器中发现了 scss

 ion-app.md [padding] .scroll-content {
    padding: 16px;
}

如果我删除这个填充，那么 ion-item 可以通过删除这个填充来占据整个宽度，但是当我在我的 scss 文件中使用它时，填充不会被删除。

原文由 Aditya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以解决 ion-item 填充不同的方式……

第一：使用 ion-no-padding 类

<ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail>
  <h2>Text</h2>
</ion-item>

第二种：使用css或者内联样式

<ion-item style="padding:0px !important;">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail>
  <h2>Text</h2>
</ion-item>

编辑：作为 Ionic 5.X，我们必须按类而不是属性（ ionic/BREAKING.md ）使用 CSS 实用程序。

原文由 Utpaul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于那些使用 ionic 4 的人，你应该使用 Ionic CSS Utilties 进行填充

简而言之，您必须编写以下代码：

 <ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail>
  <h2>Text</h2>
</ion-item>

如果要删除内部填充，请使用 ion-item 自定义 CSS 属性：

 ion-item {
  --padding-end: 0px;
  --inner-padding-end: 0px;
  // here other custom CSS from documentation
}

原文由 MaxC 发布，翻译遵循 CC BY-SA 4.0 许可协议