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

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>

ion-item 的填充为 16px，当我检查 ion-item 以及 class="scroll-content" 时，我在

的检查器中发现了 scss

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

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

Answer 1

只需将 no-padding 赋给 ion-item 它将删除填充

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

参考离子docs

Answer 2

从页面内容中删除填充解决了问题

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

Answer 3

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

首先：使用ion-no-paddingclass

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

Edit ：作为 Ionic 5.X，我们必须通过 class 使用 CSS 实用程序而不是属性（ ionic/BREAKING.md ）。

Answer 4

如果您不想为每个 ion-item 添加无填充，请为整个应用程序删除它。

对于 ionic v4，您可以将其添加到 global.scss:

ion-item {
    --padding-start: 0;
}

来源：https://ionicframework.com/docs/api/item#css-custom-properties

Answer 5

对于那些正在使用 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
}

Answer 6

我不得不使用自定义 CSS properties for ion-item

ion-item {
  --inner-padding-bottom: 0;
  --inner-padding-end: 0;
  --inner-padding-start: 0;
  --inner-padding-top: 0;
}

Answer 7

也遇到了同样令人抓狂的问题。原来 ion-item 有一些 --inner-padding 规则需要被覆盖以停止填充出现在它的 children

以及添加

class="ion-no-padding"

我还需要添加以下 css 样式规则

--inner-padding-end: 0 !important;

制作最终元素

<ion-item *virtualItem="let section" lines="none" class="ion-no-padding" style="--inner-padding-end: 0 !important;">
...

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

How to remove the padding around ion-item?

html

css

ionic-framework

ionic2

ionic3