kankamuso kankamuso - 3 months ago 45
CSS Question

How to remove "padding" from ionic card

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:

You can see the bottom padding-like space

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

See 1st you should never assign negative values to padding as it won't work. If you need to work with negative values then use margin,

2nd try adding width and height of 100% to your img.

Just for example -

#parent{
  width:500px;
  height:300px;
}

#parent > img{
  width:100%;
  height:100%;
}
<div id="parent">
<img src="https://source.unsplash.com/random">
</div>

Comments