无法删除图像离子下方的填充

Question

我正在尝试将图像添加到 ion-content 中，本质上是作为顶部横幅，但在其下方自动添加了一些令人讨厌的填充，我似乎无法删除。代码是：

<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>

这个 codepen 演示了我在说什么 https://codepen.io/anon/pen/LkvObV。我想删除图像底部和“设置”项目分隔符之间的间距。有谁知道怎么做？我试过在 css 中使用 padding/margin 属性没有成功。

Answer 1

将display: block; 应用到img 标签，看看魔术！

解释：

默认情况下，图像是内联渲染的，就像文本一样。默认情况下，所有 inline-block 元素都有一些垂直对齐值 - 通过应用 vertical-align: top 重置它或通过应用 display: block 重置显示属性