Почему div наследует свойство sub div?

в разделе заголовка моей веб-страницы, дизайн - это что-то вроде логотипа и навигационного div, который должен перекрывать изображение repeat-x (i.e bg-header).Почему div наследует свойство sub div?

это HTML я использовал

<div id="header"> 
    <div id="header-bar"> 
     <p>kljslakdjlaskjdkljasdlkjasdlkjaskldjasjd</p> 
    </div> 
</div>

и это CSS

#header { 
    min-width: 1040px; 
    height: 111px; 
    position: relative; 
} 
#header-bar { 
    margin-top:50px; 
    height:53px; 
}

теперь, когда в # заголовок-бар, если я дать маржинального-топ: 50px затем DIV заголовка сдвигает позицию до 50 пикселей сверху. Я хочу достичь чего-то вроде

Заголовок div должен определять высоту содержимого заголовка.

Я хочу обернуть заголовок в заголовке div, а элементы или div, завернутые в div div заголовка, должны иметь поле 50px изнутри заголовка.

например, заголовок должен иметь разность в 50 пикселей от верхней части заголовка.

, когда я использую вышеуказанный код, он также перемещает позицию заголовка div. Я хочу, чтобы заголовок div был исправлен сверху только sub div или содержимое в заголовке div - это то, что я хочу позиционировать.

надеюсь, что я вас не смущает.

, где я ошибаюсь?

спасибо

EDIT: он работает, если я использую обивка-топ, но исключая фон с повтор х собственности.

Я хочу переместить изображение с использованием свойства repeat-x. в заголовке-bg div

источник

2010-10-15 Ibrahim Azhar Armar

Используйте отступы на заголовок DIV, а не края.

#header { 
    min-width: 1040px; 
    height: 111px; 
    padding:50px 0px 0px 0px; 
} 
#header-bar { 
    height:53px; 
}

источник

2010-10-15 11:16:07 jimplode

Да, я тоже пробовал. но опять же он дает выход так же, как и маржу. он покидает пространство снаружи, а не внутри. –

это не звучит правильно !! Можете ли вы опубликовать полный код, который демонстрирует ошибку, и я заставлю его работать на вас. – jimplode

спасибо Джим, я очень ценю вашу помощь. хорошо, я близок к решению. я обязательно вернусь к вам. если мне нужна помощь. Еще раз спасибо за это доброе слово. –

Маржа не влияет на положение элементов относительно их родителей.

Для достижения эффекта вы хотите, вы должны использовать отступы на #header, например:

#header { 
    min-width: 1040px; 
    height: 61px; 
    position: relative; 
    padding-top: 50px; 
} 
#header-bar { 
    height:53px; 
}

источник

2010-10-15 11:14:42

Если вы добавите «переполнение: скрыто» в div #header, это будет работать как шарм! Обратите внимание, что есть дополнение, но также маржа. Если вы удалите прокладку, все равно останется место, это край!

Jsfiddle example here

источник

2010-10-15 13:56:36

Ваш пример вводит в заблуждение. Это не имеет ничего общего с «переполнением: скрытым» - исправление исходит из вашего использования отступов на '# header' –

Прокладка есть, потому что я скопировал существующий код. Если вы удаляете прокладку, то есть еще 50 пикселей. –

О, эй, ты прав. Извиняюсь, и я отменил бы мой downvote, если бы мог. –

Вы бежите в то, что называется margin-collapse. По сути, смежные поля будут рушиться вместе и отображать только более крупную, то есть ту, которая имеет более абсолютное расстояние от 0. Поскольку ваш #header margin (0px) смежна с вашим # полем заголовка (50 пикселей), 50px margin - это тот, который отображается, и он влияет на оба ваших элемента.

Если вы должны были добавить еще 1px отступов к началу #header, вы получите желаемый эффект:

#header { 
    min-width: 1040px; 
    height: 111px; 
    position: relative; 
    padding-top: 1px; 
}

источник

2010-10-15 14:04:23

Я не уверен, что понял вопрос.

Кажется ли ваш ответ: link?

источник

2010-10-15 14:09:19 Shikiryu

Почему div наследует свойство sub div?

ответ

Смежные вопросы