Почему эти divs отталкивают друг друга?

<html> 
<div style="width:200px;"> 
    <div style="background:red;height:5px"></div> 
    <div style="background:yellow"> 
    Magnets? 
    </div> 
    <div style="background:green;height:5px"></div> 
</div> 
</html>

Rendering with "Magnets?" wrapped in h3 tags Почему эти divs отталкивают друг друга?

Какие дивы перестают быть смежными, если "магниты?" заключен в тег абзаца или заголовка?

источник

2010-05-20 Lucifer Sam

Элементы, которые вы обертываете, имеют по умолчанию поля.

источник

2010-05-20 03:31:57

Спасибо! Установка полей по умолчанию на 0 работает, но почему div не растягивается с содержимым? –

Вам необходимо обнулить поля на h3 или p.

<html> 
<div style="width:200px;"> 
    <div style="background:red;height:5px"></div> 
    <div style="background:yellow"> 
    <h3 style="margin:0px;">Magnets?</h3> 
    </div> 
    <div style="background:green;height:5px"></div> 
</div> 
</html>

Если вы хотите сохранить маржу на h3 и других элементах, то вам нужно решить проблему задворки элементов внутри DIV разрушающегося. Есть несколько способов исправить это:

Добавить границу в DIV
Добавить границу 1px в DIV
Удалить запас из элемента и добавьте его в DIV вместо этого.

Следующая ссылка содержит больше информации:

http://www.complexspiral.com/publications/uncollapsing-margins/

источник

2010-05-20 03:37:44

Спасибо за ответ! Решение действительно работает, но не должно ли маржа заголовка нажимать его относительно заполнения его родительского div? –

Прочтите следующие сообщения для получения дополнительной информации о заполнении и полях: http://www.complexspiral.com/publications/uncollapsing-margins/ http://www.goer.org/HTML/intermediate/margins_and_padding/ –

@Terminal Проблемы с коллапсирующими полями. Прочтите первую ссылку, указанную в комментарии выше, для получения информации об этом. Чтобы исправить это, вы можете либо установить дополнение 1px на главный div, либо дать ему границу. Это позволит вам сохранить маржу на h3 и иметь цвет фона, охватывающий весь элемент. –

Почему эти divs отталкивают друг друга?

ответ

Смежные вопросы