How to remove "padding" from ionic card

Question

I am trying to insert inamges inside ionic cards. I preferred to use cards because I want to keep aspect homogeneous. The problem is that, as you can see on the next image, there is a white space at the bottom (more evident here, but also present at top and sides) of the card after an image:

I have tried using CSS but no luck. In part it is probably because I don't know which CSS is involved. Also, I don't really know how to remove such white space.. I even tried using negative padding values but it does not work so I suppose it is not really the card component but a subpart which is doing the issue.

This is my current code:

<div class="card" ng-controller="cycleImagesCtrl">
    <div class="item item-body" style="padding: 0px 0px 0px 0px;">
        <img src={{imgTitle}} width="100%" />
    </div>
</div>

Any hints?

Answer 1

Add margin: 0 !important; and padding: 0 !important; for your card's css. Like this:

ion-card {
width:100%;
height:300px;
margin: 0 !important;
padding: 0 !important;
}

ion-card > img {
 width: 100%;
height: 100%;
}

<ion-card>
<img src="...">
</ion-card>