Помогите с отступами...

[Noraad]

Люди..я совсем запутался..первый раз такая проблемма..До этого верстал и ничего подобного не было.

Вот html код:

<div id="wrapper">

<div id="logo"></div>

</div>

Вот css:

html, body {

margin: 0px;

padding: 0px;

position: relative;

height: 100%

}

body {

height: 100%;

width: 1100px;

padding: 0 0;

margin: 0 auto;

}

#wrapper {

display: block;

position: relative;

text-align:left;

margin: 0 auto;

width: 1000px;

height: 100%;

background: #ffffff url(../image/bg.jpg) no-repeat 0 0;

}

#logo {

display: block;

position: relative;

background-image: url(../image/lady.png);

width: 294px;

height: 73px;

margin: 25px 5px;

}

В общем по какой-то причине при попытке позиционировать лого относительно wrapper, сам фон съезжает вниз...скриншот прилагается. Перетыркал все свойства. В чем проблемма?

P.S. Нужно отодвинуть лого на 25px справа и 5 px сверху от фона.

[Noraad]

Господа, я разобрался, все заработало, когда я значение position: relative у блока wrapper поставил :absolute, а также поставил ширину враппера не 1000 px а 100%..почему заработало?

[Sensei]

это называется схлопывание margin

можно сделать так

#wrapper {
    margin-top: -1px;
    border-top: 1px solid;
}

или просто добавить overflow: hidden

или вывести элемент из потока, что вы и сделали.

Edited January 12, 2013 by Sensei

[Noraad]

это называется схлопывание margin

можно сделать так

#wrapper {
margin-top: -1px;
border-top: 1px solid;
}

или просто добавить overflow: hidden

или вывести элемент из потока, что вы и сделали.

Спасибо большое, очень помогли, даже в закладки пока добавлю)