¿Cómo quitar el relleno alrededor del ion-item?

Quiero quitar padding de mi artículo de iones para que pueda ocupar todo el width de la pagina

Mire en las herramientas de desarrollo para ver el padding alrededor del elemento de iones.

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-thumbnail>
        <img class="imgmg" src="https://stackoverflow.com/questions/49569679/...">
      </ion-thumbnail> 
      <h2>Text</h2>
    </ion-item>
  </ion-list>
</ion-content>

El ion-item tiene un relleno de 16px, cuando inspecciono el ion-item y también en class=”scroll-content” allí encontré scss en el inspector con

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

Si elimino este relleno, entonces ion-item puede ocupar todo el ancho eliminando este relleno, pero cuando uso esto en mi archivo scss, el relleno no se elimina.

Para aquellos que usan ionic 4, deben usar Utilidades Ionic CSS para relleno

En resumen, tienes que codificar esto:

<ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="https://stackoverflow.com/questions/49569679/...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Si desea quitar el acolchado interior, use ion-item propiedades CSS personalizadas:

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

puedes resolver ion-item relleno de diferente manera…

Primero: usar la clase ion-no-padding

<ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="https://stackoverflow.com/questions/49569679/...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Segundo: usar css o estilo en línea

<ion-item style="padding:0px !important;">
  <ion-thumbnail>
    <img class="imgmg" src="https://stackoverflow.com/questions/49569679/...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Editar : Como Ionic 5.X debemos usar utilidades CSS por clase en lugar de atributos ( iónico/BREAKING.md ).

Tuve que usar personalizado propiedades CSS por artículo de iones

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

simplemente no proporcione relleno al elemento de iones, eliminará el relleno

<ion-item no-padding>
  <ion-thumbnail>
    <img class="imgmg" src="https://stackoverflow.com/questions/49569679/...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Consulte el iónico documentos

También tenía el mismo problema enloquecedor. Resulta que ion-item tiene algunas reglas de relleno interno que deben anularse para evitar que aparezca relleno en sus elementos secundarios.

Así como agregar el

class="ion-no-padding"

También necesitaba agregar la siguiente regla de estilo css

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

Haciendo el elemento final

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

Si prefiere no agregar ningún relleno a cada elemento de iones, elimínelo para toda la aplicación.

Para v4 iónicopuede agregar esto a global.scss:

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

Fuente: https://ionicframework.com/docs/api/item#css-custom-properties

Eliminar el relleno del contenido de la página resuelve el problema

<ion-content> 
  <ion-list>
    <ion-item>
      <ion-thumbnail>
        <img class="imgmg" src="https://stackoverflow.com/questions/49569679/...">
      </ion-thumbnail> 
      <h2>Text</h2>
    </ion-item>
  </ion-list>
</ion-content>