Почему вложенный HTML-элемент заставляет меня переходить в CSS? - PullRequest
Новая
       13

Почему вложенный HTML-элемент заставляет меня переходить в CSS?

4 голосов
/ 01 марта 2012

Вот загадка. Основная страница, один элемент:

http://jsfiddle.net/PZj6t/

HTML: 

<div id="container"></div>​

CSS: 

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}
#container {
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 100%;
    background-color: #666;
}
​

Это выглядит так, как я хочу, с #container, аккуратно поднятым вверх. Но когда я добавляю вложенный элемент:

http://jsfiddle.net/PZj6t/1/

HTML: 

<div id="container">
    <nav id="topnav"></nav>
</div>​

CSS (новый): 

#topnav {
    width: 100%;
    height: 40px;
    margin: 30px 0;
    background-color: red;
}
​

Контейнер прыгает вниз. Кажется, что margin-top из #topnav каким-то образом передается в контейнер, и теперь на странице есть полоса прокрутки, которая мне не нужна. (Я тестирую в Chrome.) Как мне предотвратить это?

(Еще одна загадка, если я добавлю border: 1px solid white; к CSS-контейнеру #, переход исчезнет. Это было бы хорошо, за исключением того, что также добавляет нежелательную прокрутку на страницу в два пикселя.)

Ответы [ 4 ]

5 голосов
/ 01 марта 2012

Это связано с функцией CSS, которая называется свертыванием полей.Если для родительского элемента нет отступов или границ, родительский элемент и его дочерние поля «сворачиваются» в большее значение из двух и по существу применяются к родительскому элементу.

В вашей ситуации я бы предложил простодобавив дополнительную внутреннюю обертку в контейнер, и добавив к ней некоторые отступы для имитации эффекта поля, который вы ищете: http://jsfiddle.net/PZj6t/3/

Все в пределах #inner div или ниже должно вести себя так, как вы ожидаетеПоля сворачиваются только тогда, когда они находятся на краю своего родителя (а отступы или границы отсутствуют).

1 голос
/ 01 марта 2012

Jblasco правильно, но это более точное решение: http://jsfiddle.net/PZj6t/4/

#container {
    position: relative;
    margin: -1px auto 0;
    width: 400px;
    height: 100%;
    padding-top:1px;
    background-color: #666;
}
#topnav {
    width: 100%;
    height: 40px;
    margin: 29px 0 30px;
    background-color: red;
}
1 голос
/ 01 марта 2012 
display:inline-block;

На вашем навигационном элементе появится, чтобы исправить это.Это связано с коллапсом, см. здесь для более подробной информации.

0 голосов
/ 01 марта 2012 
#container {
    margin: 0 auto;
    width: 400px;
    height: 100%;
    background-color: #666;
    border:1px solid;
}

http://jsfiddle.net/PZj6t/12/

Update:

http://jsfiddle.net/PZj6t/1/
применяются display:inline-block; как container, так и topnav

...