Witam, piszę sobie malutką stronkę i napotkałem na problem z zagnieżdżonymi znacznikami span (div też jest źle interpretowany). Mianowicie margin-top w elemencie <span> przesuwa wszystko a powinien tylko to co pomiędzy znacznikami <span></span>. Zapewne zrobiłem jakiś błahy błąd tylko jakoś nie potrafię go odnaleźć.

[HTML] pobierz, plaintext 
        <div id="main-border">
            <div id="company-name">
                <span class="shift">Jakieś info</span>
            </div>
            <div id="information">Jakieś informacje</div>
            <div id="send-border">Tu wysyłam</div>
        </div>  
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
body {
    text-align: center;
}
div {
    border: 1px solid; width: 50%;
    text-align: left;
    margin: 0 auto 0 auto;
}
div#main-border{
    margin-top:100px;
    width:789px;
    height:372px;
}
div#company-name{
    margin-top:0px;
    margin-left:0px;
    width:410px;
    height:141px;
    background-color:#ffdb9d;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-top-left-radius: 20px; 
    -khtml-border-radius-topright: 20px;
    -khtml-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-topleft: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border:0px;
    font-family:TimesNewRoman;
    font-size:40px;
    color:#a52a2a;
}
span.shift{ /*to jest źle interpretowane -> margin-left działa poprawnie natomiast margin-top przesuwa całość(nawet rodziców) */
    margin-top:50px;
    margin-left:50px;
}
div#information{
 
    float:left;
    margin-left:0px;
    width:410px;
    height:231px;
    background-color:#ffdb9d;
    -webkit-border-bottom-left:20px;
    -khtml-border-radius-bottomleft:20px;
    -moz-border-radius-bottomleft:20px;
    border-bottom-left-radius:20px;
    border:0px;
}
div#send-border{
    width:379px;
    height:231px;
    margin-right:0px;
    background-color:#ffdb9d;
    border:0px;
    -webkit-border-bottom-right-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -khtml-border-radius-topright: 20px;
    -khtml-border-radius-bottomright: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;    
}
[CSS] pobierz, plaintext 

a jestes pewien ze nic sie nie rozjezdza ? bo ustawiles wielkosc czcionki na 40 i jeszcze margines 50px od gory moze poprostu cos sie rozjechalo i dlatego tak sie przesuwa.
Jak piszesz tak to wystarczy pisanie samego #nazwaid, .nazwaklasy bez span albo div przez tym.

niestety, nawet mimo zmniejszenia czcionki "margin-top:10px;" nie działa. Może rzeczywiście coś się rozjeżdża tylko jak to sprawdzić co.

Nadaj spanowi charakter blokowy bo na razie jest inline,tak mi się wydaje:

.shift{

margin-top:50px;
margin-left:50px;
display:block;
}
Z separatorami jest tak,że jak używasz klasy to można zapisać w taki sposób:
.shift
{
}
,jeśli klasy nie używasz to:
div span{
}-wtedy będą formatowane wszystkie spany na stronie
Poprawną formą także jest:
div span.shift{
}-wskazujesz że div jest rodzicem.

Próbuj także pobawić się z display:inline-block;

[CSS] pobierz, plaintext 
 
span.shift {
    padding-top:50px;
    margin-left:50px;
    display: block;
}
 
[CSS] pobierz, plaintext 

nie rozumiem dlaczego nie mogę użyć margin-top kiedy właśnie mi ono najbardziej odpowiada ;/ jakieś to dziwne, ten html to w ogóle dziwne stworzenie. Ciągle się coś pierdzieli