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

【问题标题】：How to remove the padding around ion-item?如何去除离子项目周围的填充物？
【发布时间】：2018-09-09 05:09:31
【问题描述】：

我想从我的 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 有 16px 的填充，当我检查 ion-item 以及 class="scroll-content" 时，我在检查器中发现 scss

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

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

【问题讨论】：

尝试将id = 'ion-overrides' 或任何您想调用的名称添加到您的body 元素中，然后在您的scss 中将ion-app.md [padding] .scroll-content {...} 更改为#ion-overrides ion-app.md [padding] .scroll-content {...}。您可能需要更详细地指定元素，因为离子元素的 css 在您的之后添加，因此它会覆盖您的 css。
但是如何将 id 添加到 ion-app .md ？
@Aditya 我解决了你的问题，请检查一下

标签： html css ionic-framework ionic2 ionic3

【解决方案1】：

只给 ion-item 不填充它会移除填充

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

参考离子docs

【讨论】：

我赞成你的回答，因为我从你的回答中得到了灵感。
这不会从 item-inner 中删除填充

【解决方案2】：

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

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

【讨论】：

请解释为什么您的答案解决了最初的问题，如果需要，还可以添加一些示例。

【解决方案3】：

你可以用不同的方式解决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 实用程序。

【讨论】：

这个解决方案适用于 ionic 3 @WoIIe
方法 1 适用于大多数填充。但它似乎没有覆盖逻辑 css，所以我留下了一些计算填充附加到 item-inner 类下的 padding-inline-end 属性。有没有人找到解决方案？ padding-inline-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
ionicframework.com/docs/api/item#css-custom-properties 拥有所有的属性和css4变量。
对于Ionic 5.X，如果我想使用margin和text-right怎么办，我只能有一个类。
@BanAnanas 你能添加多个类吗？如果有人不禁止你使用多个类，你可以添加多个类，用` `（空格）分隔它们，即class="class1 class2 classN"

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案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
}

【讨论】：

这是一个比公认的更全面的答案
我遇到的一个问题是我将这些放在内部（子）元素上，而这些需要放在 ion-item（父）元素上。为此工作。捂脸！

【解决方案6】：

我必须为ion-item 使用自定义CSS properties

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

【讨论】：

【解决方案7】：

也有同样令人抓狂的问题。事实证明， 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;">
...

【讨论】：