Почему два элемента находятся всего в 50 пикселях друг от друга, когда верхний элемент имеет поле 50 пикселей снизу, а нижний элемент имеет поле 50 пикселей сверху?

#css #margins

#css #поля

Вопрос:

Мне нужно убедиться, что два элемента всегда находятся на расстоянии 100 пикселей друг от друга. В моем коде нет ошибок, но по какой-то причине значение margin-bottom в теге P равно 50 пикселям, а значение margin-top в DIV под ним также равно 50 пикселям.

Вместо того, чтобы быть в общей сложности на расстоянии 100 пикселей друг от друга, их всего 50. Кто-нибудь может это объяснить? У меня нет плавающих значений на странице, так что это не из-за проблемы с очисткой. Весь html и css были проверены.

Это происходит в последней версии Chrome и FIrefox 3.6.

Вот пример моего кода:

 #content p {
    margin-bottom: 50px;
}

#content #posted {
    border-top: 1px dotted #ccc;
    line-height: 20px;
    margin-top: 50px;
}

1. Не могли бы вы опубликовать соответствующий код, пожалуйста?

2. Я предполагаю, что большинство людей хотели бы увидеть какой-нибудь код, чтобы проверить, что вы делаете.

Ответ №1:

Поля накладываются друг на друга. Максимальным полем элементов будет расстояние между двумя элементами.

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

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

Ответ №2:

Поля не складываются таким образом. Нижний элемент задает только расстояние в 50 пикселей от верхнего элемента, не от края верхнего элемента. Поэтому вам нужно сделать поля размером 100 пикселей.