Ionic 5 Extra padding issue

Ionic Framework
1

Just upgraded from v4 to v5 and I’m getting extra padding between images on an ion-card (eg)

<img images-filter src="../../assets/imgs/xxxxxxx1.jpg" />
<img images-filter src="../../assets/imgs/xxxxxxx2.jpg" />
<img images-filter src="../../assets/imgs/xxxxxxx3.jpg" />

In v4 there was no extra padding between the images, in v5 there is and I can’t find out how to remove it without using

style="margin-top:-4px"

In addition, there’s extra padding on the ion-card at the bottom so there’s a border after the last image.

Any ideas how to remove the padding or get around the issue?

Thanks!

2

Why don’t you post your entire markup + screenshot, or even better link to a stackblitz or plunkr - then people could actually help you?

4

OK…just found the answer. Using <ion-img> solves the issue :slight_smile:

5

Hi @Hothoundz recently experience this as well, the adjustment vary between 3px - 8px. Did you find other solutions than replacing it with ion-img. Any experience when using img for ion-slides?

6

No other solutions.

For stand alone img use ion-img

I believe that using ion-slide you can just use img

7

The cause of the blank is due to the default display property value of img elements, that is, display:inline, I changed it to block, it solved the problem.
(disclaimer: this is chatgpt answer inspired solution. But I verified everything it said.)