user6689604 user6689604 - 3 months ago 32
CSS Question

Can't remove padding underneath image ionic

I'm trying to add in an image into ion-content, essentially as a top banner, but there's some pesky padding that's automatically added below it that I just can't seem to remove. The code is:

<ion-view>
<ion-content>
<img src="http://impact.byu.edu/style/wide_banner6.gif" style="width:100%; padding:0px">
<div class="list">
<div class="item item-divider">
Settings
</div>
</div>
</ion-content>
</ion-view>


This codepen demonstrates what I'm talking about https://codepen.io/anon/pen/LkvObV. I want to remove the spacing between the bottom of the image and the "Settings" item-divider. Anyone know how? I've tried using padding/margin properties in css to no success.

Answer

Apply display: block; to the img tag and see the Magic!

Explanation:

By default, an image is rendered inline, like text. All inline-block elements has some vertical-align value by default- reset it either by applying vertical-align: top or reset the display property by applying display: block