Почему эти дивы отталкивают друг друга? - PullRequest
0 голосов
/ 20 мая 2010
<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>

Рендеринг с "Магнитами?" завернутый в теги h3

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

Ответы [ 2 ]

2 голосов
/ 20 мая 2010

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

1 голос
/ 20 мая 2010

Вам нужно обнулить поля на 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-коллапса Есть несколько способов исправить это:

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...