Вложенные div и поля не работают должным образом

0

У меня есть div .header который находится в верхней части моей страницы, и внутри него находится .logo div. Я хочу, чтобы логотип div имел верхний край, поэтому между верхними границами заголовка и логотипа есть пробел, но когда я добавляю margin: 15px auto; to .logo, он ведет себя так, как будто я помещаю стиль поля в .header. Вот пример кода:

HTML

<body>
    <div class="header">
        <div class="logo"></div>
    </div>
</body>

CSS

body {
    background-color: #CCC;
    margin: 0;
    padding: 0;
}

.header {
    height:80px;
    background-color: #8BB;
    margin: 0;
    /*padding: 15px 0 0;*/
    /*border: 1px solid yellow;*/
}

.logo {
    height: 30px;
    width: 500px;
    margin: 15px auto;
    background-color: #B5B;
    /*border: 1px solid red;*/
}

jsfiddle

Я мог бы получить желаемые результаты, используя вместо этого padding на .header, но мне просто интересно, что происходит с полями в моем примере? Что также странно, если вы раскомментируете пограничный css, который у меня есть в .header, он будет работать так, как ожидалось.

Протестировано с помощью FF и Chrome.

Теги:

2 ответа

2
Лучший ответ

Убедитесь, что родительский (заголовок) имеет: overflow: hidden;

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

http://reference.sitepoint.com/css/collapsingmargins

Поделиться
  • 0
    Благодарю. Почему я не могу контролировать это без overflow: hidden; ?
  • 0
    @Shredder, посмотрите спецификацию блочной модели для CSS w3.org/TR/CSS2/box.html, которая должна помочь вам понять это. Кроме того, вот тот же вопрос, который вы разместили: stackoverflow.com/questions/1762539/…
Показать ещё 3 комментария
0

Добавьте этот CSS в .logo:

display: inline-block;

Однако это приведет к выравниванию .logo влево. Вы можете исправить это, добавив text-align: center; к .header

Поделиться
  • 0
    Я не так заинтересован в том, чтобы заставить поля работать, но почему это не работает так, как есть.
  • 0
    Тогда, вероятно, решение Riskbreaker поможет вам лучше.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню