Верхняя маржа не действует так, как я ожидаю .. почему?

Question

Так что я некоторое время занимался html ... но я продолжаю сталкиваться с проблемами, когда использую поля. Это заставляет меня обычно просто использовать отступы.

В любом случае, позвольте мне привести пример того, над чем я сейчас работаю.

http://vasoshield.xcsit.com/index.html

Основная структура:

<div id="main">
   <div id="header">
       <div id="mainNav">
            main navigation...
       </div>
   </div>
   <div id="content">
        page content...
   </div>
</div>



#main { 
    margin: 0 auto;
    width: 745px;
    padding-left: 175px;
    padding-right: 50px;
    background: url(../images/white_bg.jpg) no-repeat top left;
    position: relative;
}

#header {   
    height: 210px; 
}
#mainNav { margin-top: 175px;  }

Проблема в том, что ... Я поместил margin-top: 150px в div "mainNav" ... и вместо того, чтобы нажимать 150px из div "header" .. вся страница перемещается вниз. Таким образом, "основной" div на самом деле отталкивается на 150px .. Я не понимаю, почему !! Если я использую padding-top: 150px для div "mainNav", он фактически использует div "header" для нажатия вниз.

Имеет ли смысл мой вопрос?

Я уверен, что есть какое-то правило, о котором я просто не знаю. Спасибо заранее!

Answer 1

Вы имеете дело с сворачиванием полей .

См .: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Короче говоря, верхнее поле #main и #header находятся рядом с (примыкающим) полем #mainNav. Такие вертикально прилегающие края обычно сворачиваются; они образуют одну общую маржу. Сравните это с границами td с border-collapse: collapsed - они тоже становятся одной границей, ширина которой равна самой толстой границе.

Коллапсируют только вертикальные поля, и они рушатся, только если они примыкают и не являются специальными . Смотрите подробности в спецификации, но такие вещи, как абсолютное позиционирование, плавающее и некоторые другие вещи, предотвратят падение полей.

Например, вы можете установить #header { padding-top:1px; } или применить один из описанных в спецификации случаев, которые препятствуют соприкосновению границ (например, плавание элемента). Обратите внимание, что плавающие и другие случаи предотвращают сужение полей, чтобы упростить спецификацию: вы входите на сложную территорию за небольшую прибыль.

Ваш запасной вариант использования отступа вместо отступа (или применения любого промежуточного интервала, например, отступа в 1 пиксель, который я описал ранее) - лучший выбор; они влияют на остальную часть вашего макета довольно минимально, тогда как введение поплавков и / или абсолютного позиционирования может вызвать странные взаимодействия, когда страницы становятся сложными (в частности, когда вы начинаете рассматривать сценарии печати).

Answer 2

Хорошо ... просто добавление переполнения: скрытый в "основной" контейнер работает .. не спрашивайте меня, почему!

Answer 3

Поскольку в элементе header до элемента mainNav нет содержимого, поле - это первое, что необходимо учитывать браузеру, поэтому создается впечатление, что вся страница сдвигается вниз. Я предлагаю добавить 1px solid red границы ко всем элементам div, чтобы вы могли видеть, куда и куда идти.

Answer 4

попытайтесь поставить вашу основную позицию div в положение: absolute; Это будет работать, я думаю. Я не знаю причину