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

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; } 

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

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

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

Answer 1

Вы имеете дело с сворачивающимися полях.

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

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

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

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

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

Answer 2

попытайтесь установить основную позицию на позиции: абсолютное; Думаю, это сработает. Я не знаю причину

Answer 3

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

Answer 4

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