Из за чего мог появится отступ между картинками?

Question

[GoodProject]

Доброе.

Из за чего тут мог появится отступ?


Оригинал: i.imgur.com/qk7xvou.png

Отступ слева и сверху указаны правильно, ибо при position: absolute результат выглядит как и в PSD, но когда вписываю relative появляется отступ.

Конечно, эту проблему можно легко исправить, просто ввести отступ сверху у второго элемента на 20 меньше, но мне интересно, из за чего появился отступ.

И ещё вопрос, правильно что я использую relative? А то на одном форуме говорят что это неправильно. Если да, то как тогда располагать элементы. если через абсолют при масштабировании страницы они становятся кривыми..

Answer 1

[Евгений Петров]

Ну так при абсолютном позиционировании блоки друг друга не учитывают и дружно считают координату Y от padding box контейнера.

Как только позиционирование сменилось на относительное, блоки стали учитывать друг друга, а координата стала означать не расстояние от padding box контейнера, а смещение относительно стартовой позиции.
То есть блоки расположились друг под другом, затем первый сдвинулся вниз на 72 пикселя, а второй на 98. так и образовалась разница в 26 пикселей.

Так что определитесь — как и зачем вам двигать блоки, ибо координаты в относительном позиционировании сдвигают элемент, а остальные про это не знают ничего.

Comments

[GoodProject]

Понял. Тогда как обычно двигают элементы на странице? И какой способ правильнее использовать? А нужно просто для позиционирования элементов в нужном месте.

[Евгений Петров]

Это зависит от макета и структуры документа. Судя по вашему — просто один блок под другим, а между ними задан отступ.

Answer 2

[GoodProject]

Я кажется понял, т.е если у первого блока стоит height: 30 и вниз я добавляю ещё один блок, и ставлю ему top: 30 то в сумме получается отступ от самого верха 60px? Т.е подсчёт расстояния идёт не от самого начала сайта а от объекта который стоит выше? Если да, то как тогда понять какое значение нужно вписывать, если в PSD указано 140px, а на деле получается, 30-40px, как узнать какое значение самое точное, прям как в шаблоне? А то у меня там есть ещё значение которое отбавляет -36px, так и запутаться можно..

Answer 3

[YemSalat]

Потомучто css так работает.

RTFM!