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

StackOverflow https://stackoverflow.com/questions/3947113

Вопрос

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

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

В IMG всегда есть разрыв 13 пикселей между «SC» и «сепаратором».

Рейзы и прокладки для обоих установлены на 0, нулевые, пустые, ничего. Argh. Я такой безумный; D

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

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

Что не так с моим кодом? Я пытался удалить пробел в HTML, но не помогает (кстати, если я поставлю сепаратор выше «SC» Div, есть также некоторые разрыв, но меньше).

Спасибо.

ДОБАВЛЕН

Стили 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;
}
Это было полезно?

Решение

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

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

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

Другие советы

У меня был 3PX разрыв между изображением и тегом 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" />
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top