Пространство между 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" и "разделителем" img.

Поля и paddings для обоих устанавливаются в 0, null, empty, nothing. Argh. Я так злюсь, d

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

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

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

Спасибо.

[ADDED]

CSS STYLES:

.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;
}

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

img {
   vertical-align: middle;
}

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

Ответ 3

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

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

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

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

Если вы действительно это делаете, есть множество вариантов:

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

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

Ответ 4

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

делать:

</div><img class="separator" src="images/separator.png" />