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

Question

我想从离子项中移除padding，以便它可以占据页面的完整width。

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我检查离子项时，以及类=＆＃34;滚动内容＆＃34>时，离子项的填充为16px。在那里，我在检查员身上发现了scss

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

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

Answer 1

只要给离子项添加无填充它将删除填充

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

参考离子docs

Answer 2

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

首先：使用无填充

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

Answer 3

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

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

Answer 4

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

Answer 5

如果您不希望对每个离子项目不添加填充，请在整个应用程序中将其删除。

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

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

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

Answer 6

对于使用离子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>

如果要除去内部填充物，请使用离子项目custom CSS properties：

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

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>