Пространство между div и img? - PullRequest
Новая
       12

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

26 голосов
/ 16 октября 2010

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

        <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. Я так зол, д

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

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

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

Спасибо.

[ADDED]

СТИЛИ 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 ]

66 голосов
/ 16 октября 2010

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

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

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

9 голосов
/ 10 сентября 2013

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

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

img {
   vertical-align: middle;
}

Для меня это прекрасно работало.

0 голосов
/ 16 октября 2010

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

Я предполагаю из 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

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

0 голосов
/ 16 октября 2010

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

сделать: 

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