Ionic-2 : Space issue between ion-items - ionic2

Question

I'm using 'ngFor' to repeat ion-items but i'm not getting any space b/w each item.
My code :
<ion-list >
<button ion-item class="my-item" *ngFor="let r of recentUpdatesData" (click)="goToReleatedPage(r)">
<ion-thumbnail item-left>
<img src="assets/{{r.imagePath}}" alt="your image">
</ion-thumbnail>
<h2><strong>{{r.title}}</strong></h2>
<h3>{{r.type}}</h3>
<p>{{r.description | slice : 0:500}}</p>
</button>
<hr class="style14" />
</ion-list>
Final result i need:

Answer 1

I suggest you use just ion-item instead of button. It seems to be adding additional padding to the list item.
<ion-list >
<ion-item class="my-item" *ngFor="let r of recentUpdatesData" (tap)="goToReleatedPage(r)">
<ion-thumbnail item-left>
<img src="assets/{{r.imagePath}}" alt="your image">
</ion-thumbnail>
<h2><strong>{{r.title}}</strong></h2>
<h3>{{r.type}}</h3>
<p>{{r.description | slice : 0:500}}</p>
</ion-item>
<hr class="style14" />
</ion-list>
Side note: use tap instead of click in mobile devices.
Or you should redesign using ion-grid instead of ion-list.
<ion-grid>
<ion-row class="my-item" *ngFor="let r of recentUpdatesData" (tap)="goToReleatedPage(r)">
<ion-col col-6>
<ion-thumbnail item-left>
<img src="assets/{{r.imagePath}}" alt="your image">
</ion-thumbnail>
</ion-col>
<ion-col>
<ion-row>
<h2><strong>{{r.title}}</strong></h2>
</ion-row>
<ion-row>
<h3>{{r.type}}</h3>
</ion-row>
<ion-row>
<p>{{r.description | slice : 0:500}}</p>
</ion-row>
</ion-col>
</ion-row>
<hr class="style14" />
</ion-grid>