如何移除 ion-item 周围的填充？

Question

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

请查看开发者工具，查看 ion-item 周围的 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具有16像素的内边距，当我检查ion-item并在class="scroll-content"中找到了scss时，检查器中出现了

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

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

如果我删除此填充，则ion-item可以占据整个宽度，但是在我的scss文件中使用时，填充没有被移除。

- Aditya

---

尝试将 id = 'ion-overrides' 或其他你想要的名称添加到 body 元素中，然后在你的 scss 中将 ion-app.md [padding] .scroll-content {...} 改为 #ion-overrides ion-app.md [padding] .scroll-content {...}。你可能需要更详细地指定元素，因为 ion 元素的 css 会在你的 css 之后添加，从而覆盖你的 css。 - Jeremy

但是我怎么将id添加到ion-app .md中呢？ - Aditya

@Aditya，我解决了你的问题，请检查一下。 - Utpaul

Answer 1

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

---

我遇到的一个问题是，我把它们放在了内部（子）元素上，而这些需要放在ion-item（父）元素上才能正常工作。捂脸！ - BHinkson

Answer 2

您可以通过不同的方式解决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开始，我们必须通过类而非属性来使用CSS实用工具（ionic/BREAKING.md）。

- Utpaul

---

方法1适用于大多数填充。但它似乎不会覆盖逻辑css，所以在item-inner类下的padding-inline-end属性中仍然有一些计算填充。有没有人找到了解决这个问题的方法？ padding-inline-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)); - SeekingMoneky

它包含所有属性和CSS4变量。请参阅https://ionicframework.com/docs/api/item#css-custom-properties - Nikola Noxious Dimitrov

对于Ionic 5.X，如果我想同时使用margin和text-right，但只能有一个类，我该怎么办？ - BanAnanas

@BanAnanas 你可以添加多个类吗？如果没有人禁止你使用多个类，你可以通过使用空格分隔它们来添加多个类，例如：class="class1 class2 classN"。 - user12299366

Answer 3

我不得不使用自定义的CSS属性来为ion-item进行样式设置。

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

- cksrc

Answer 4

只需对 ion-item 进行 no-padding 设置，即可去除填充。

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

参考 ionic 文档

- Abinesh Joyel

---

我正在给你的回答点赞，因为我从你的回答中得到了灵感。 - Aditya

这不会从item-inner中移除填充。 - nios

Answer 5

我也遇到了这个令人生气的问题。事实证明，ion-item有一些 --inner-padding规则需要被覆盖，以防止其子元素出现填充。

另外还需要添加

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;">
...

- Malcolm Swaine

Answer 6

如果您不想为每个ion-item添加no-padding，而是想要将其从整个应用程序中删除。

对于ionic v4，您可以将此代码添加到global.scss中：

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

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

- Dylan w

Answer 7

从页面内容中删除填充可以解决问题。

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

- Aditya

---

请解释为什么您的答案可以解决初始问题，并在必要时添加一些示例。 - Pom12