画像の下のパディングを取り除くことができません

イオン含有量の画像を基本的にトップバナーとして追加しようとしていますが、その下に自動的に追加される厄介なパディングがあります。コードは次のとおりです。画像の下のパディングを取り除くことができません

<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で成功してみました。

出典

2016-08-19 user6689604

imgタグにdisplay: block;を適用し、Magic！

説明：

デフォルトでは、イメージはテキストのようにインラインでレンダリングされます。すべてのインラインブロック要素には、デフォルトで垂直方向の値がいくつかあります。vertical-align: topを適用するか、display: block

出典

2016-08-19 18:03:08 kukkuz

を適用して表示プロパティをリセットしてリセットします。それは驚くほど簡単でした。状況をデバッグした方法について少し説明してもらえますか？私は何時間もコンソールで狩りを試みましたが、何も見つかりませんでした... – user6689604

答えに追加された:)ありがとう！ – kukkuz

私はもう数分間は答えを受け入れることができませんが、私は直後にします。私はまた私が持っていた別のマイナーなCSSの問題について尋ねたいと思っていました。もしあなたがもう一度codepenを見て、https://codepen.io/anon/pen/LkvObVを更新し、バナーのすぐ下にボタンを追加しました。私は削除することはできませんパディングの小さなスライバー、それを削除する方法についてのアドバイス？ – user6689604

画像の下のパディングを取り除くことができません

答えて

関連する問題