Пространство между div и img?

У меня есть такой код:

        <div id="sc">  
            <h1>1. Orange</h1>
            <p>some text in here </p>                                          
        </div>
        <img class="separator" src="images/separator.png" />

ВСЕГДА 13px промежуток между "sc" div и "separator" img.

Поля и отступы для обоих установлены на 0, ноль, пусто, ничего. Argh. Я так злюсь;d

Я пытался выяснить, что происходит с firebug, но пространство между ними просто ни к чему не относится, это не поле, не отступы, какого черта?

Нет поплавков, нет настроек отображения, нет унаследованных полей или отступов либо.

Что не так с моим кодом? Я пытался удалить пробел в HTML, но это не помогло (кстати, если я поставлю разделитель над div "sc", есть также некоторый пробел, но меньший).

Благодарю.

[Добавлено]

CSS СТИЛИ:

.separator {
    margin: 0;
    padding: 0;
}

#sc {
    text-align: justify;
    padding: 0;
    margin: 0;
    background-image: url('images/bg.png');  
    background-repeat: repeat-y;
    width: 970px;
}
Источник

4 ответа

Решение

Добавить отображение: блок; к изображению.separator.

.separator {
    margin: 0;
    padding: 0;
    display: block;
}

Проблема в том, что изображения могут иногда добавлять немного волшебного пространства вверх / вниз, у меня есть эта проблема всякий раз, когда я работаю с элементами изображения, как *block* элементы.

Источник

У меня был разрыв в 3 пикселя между изображением и тегом div. Также все стили были установлены на 0. Действительно странно.

Исправление:

img {
   vertical-align: middle;
}

Это прекрасно сработало для меня.

Источник

Без скриншотов, на которые можно сослаться, я остаюсь в неведении относительно того, что вы хотите, так что это все догадки.

Я догадываюсь из class="separator" что вы пытаетесь разбить ваш контент горизонтальной линией. Разве вы не должны использовать <hr /> с соответствующим стилем, если это так?

В любом случае, обратите внимание, что <p> элементы имеют вертикальные поля, установленные по умолчанию.

Я не понимаю, почему вы хотите, чтобы разделитель располагался вплотную к вашему тексту, потому что это визуально не имеет смысла для меня.

Если вы действительно делаете, есть куча вариантов:

  1. Задавать margin-bottom: 0; на <p>
  2. Задавать margin-top: -*px; на .separator где вы предполагаете, что всегда будете иметь элемент прямо перед разделителем с нижним полем *px
  3. #sc p:last-child { margin-bottom: 0; } и IE9.js для поддержки старых версий Internet Explorer

Но я повторяю; Никакая разница между текстом и разделителем мне не подходит.

Источник

Это потому, что между тегами есть пробел

делать:

</div><img class="separator" src="images/separator.png" />
Источник
Другие вопросы по тегам