html - 如何去除 ionic 元素周围的填充？

Question

我想从我的 ion-item 中删除 padding，这样它就可以占据页面的整个 width。

请查看开发工具以查看 ionic 项周围的填充。

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

ion-item 的填充为 16px，当我检查 ion-item 以及 class="scroll-content"时，我在检查器中发现了 scss

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

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

Answer 1

对于那些正在使用 ionic 4 的人，你应该使用 Ionic CSS Utilties for padding

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

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

如果你想移除内部填充，使用 ion-item custom CSS properties :

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