2016-08-19 4 views
1

Я пытаюсь добавить изображение в ионное содержимое, по существу, как верхний баннер, но есть некоторые досадные дополнения, которые автоматически добавляются под ним, которые я просто не могу удалить , Код:Невозможно удалить прописку под изображением ionic

<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. Я хочу удалить интервал между нижней частью изображения и разделом элемента «Настройки». Кто-нибудь знает как? Я пробовал использовать свойства padding/margin в css без успеха.

ответ

2

Применить display: block; к тегу img и увидеть волшебство!

Объяснение:

По умолчанию изображение визуализируется рядный, как текст. Все элементы встроенного блока имеют по умолчанию значение вертикального выравнивания - сбросьте его либо с помощью vertical-align: top, либо сбросьте свойство отображения, применив display: block

+0

Это сработало. Это было удивительно просто, не могли бы вы немного объяснить, как вы отлаживали ситуацию? Я пробовал охотиться на консоль в течение нескольких часов, но я ничего не мог найти ... – user6689604

+0

Добавлено объяснение ответа :) Не могли бы вы, пожалуйста, воздать/отметить ответ так же, как принято? Благодаря! – kukkuz

+0

Я не могу принять ответ еще на несколько минут, но сразу. Я также хотел спросить о другой незначительной проблеме css, которую я имел, если вы снова посмотрите на кодировщик, я обновил его: https://codepen.io/anon/pen/LkvObV и добавил кнопку прямо под баннером, что также имеет небольшая щепка прокладки, которую я не могу удалить, какие-либо рекомендации по ее удалению? – user6689604

Смежные вопросы