ion-item no padding ionic 4 - CSS

在Ionic 4中，默认情况下，ion-item有一些内部的padding，这是为了增加内容的空白间距以及提高UI/UX体验的一种设计方式。然而，如果你想要去掉这些padding，你可以通过以下CSS样式来完成：

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

解析：

• 我们使用CSS的变量来重写内部padding的值。在这个例子中，我们重写了--inner-padding-end，--inner-padding-start，--inner-padding-top以及--inner-padding-bottom变量的值，将它们全部设置为0。
• 这里的ion-item是一个CSS选择器，用于选中需要设置样式的元素，为了达成去掉padding的效果，我们选择了所有的ion-item。

示例：

<ion-item>
  <ion-input placeholder="用户名"></ion-input>
</ion-item>

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

效果：

在这个例子中，我们去掉了输入框周围的padding，让用户输入体验更加自然流畅。

总结：

如果你想要去掉ion-item的内部padding，以上就是实现这个效果的一种方式。你可以根据自己的实际需求来修改具体的数值，达到自己期望的效果。