Search code examples
htmlcssionic-frameworkionic-view

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.

Solution

  • 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