Chiarimenti sui Margini

[danlupo]

Salve, la mia è una domanda banale ma ho proprio bisogno di un chiarimento, visto che è un pò di tempo che non progetto più siti web ma i margini mi hanno sempre creato problemi.
Ho questa situazione:

body,html{
    position: absolute;
    top:0;
    left:0;
    margin: 0;
    padding: 0;
    background: black url('http://localhost/cvdanielesalvatore/public/images/sfondo.jpg');
    background-size:  100% 100%;   
    width:100%;
    height:100%;
    border:none;
    font-size: 100%;



}


#container
{
    position: relative;
    margin:5% 0 0 20%;
    padding:0;
    width:60%;
    height:90%;
    background: white;
    border:none;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;

}

Mi potete spiegare perchè il DIV #container si 'appoggia' al bordo inferiore? Per quello che mi ricordo le guide che ho letto hanno sempre detto che raddoppiano i valori non li quadruplicano

Grazie Daniele

[Mich_]

Attenzione alla sintassi!

margin:5% 0 0 20%;
lo puoi riscrivere come:
margin-top: 5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 20%;

Allora e` chiaro che con le altre dimensioni c'e` una discrepanza, dato che la somma totale non fa il 100%,
ed il browser cerca una soluzione di qualche tipo. Nel tuo caso ha appoggiato il blocco in basso, ma latri brwoser potrebbero risolvere in modo diverso.

Forse tu intendevi scrivere:
margin: 5% 20%;

che vuol dire:
margin-top: 5%;
margin-right: 20%;
margin-bottom: 5%;
margin-left: 20%;

e da qui capisci il significato di quel tuo "raddoppiano i valori", che e` una forma non corretta per dire che si sommano sia i margini sinistro che destro; sia top che bottom

[danlupo]

Innanzitutto grazie per la risposta.

In Realtà anche facendo in questo modo risultato è sbagliato (vd. allegato 1)

body,html
{
    position: absolute;
    top:0;
    left:0;
    margin: 0;
    padding: 0;
    background: black url('http://localhost/cvdanielesalvatore/public/images/sfondo.jpg');
    background-size:  100% 100%;   
    width:100%;
    height:100%;
    border:none;
    font-size: 100%;


}


#container
{
    position: relative;
    margin-top: 5%;
    margin-right: 20%;
    margin-bottom: 5%;
    margin-left: 20%;
    padding: 0;
    width:60%;
    height:90%;
    background: red;
    border:none;
        box-sizing:  border-box;
    -webkit-box-sizing:  border-box;
    -moz-box-sizing:  border-box;

}

Per Essere Corretto (Vd Allegato 2)

Il Codice devo impostarlo così

#container
{
    position: relative;
    margin-top: 5%;
    margin-right: 20%;
    margin-bottom: 5%;
    margin-left: 20%;
    padding: 0;
    width:60%;
    height:80%;
    background: red;
    border:none;
     box-sizing:  border-box;
    -webkit-box-sizing:  border-box;
    -moz-box-sizing:  border-box;
}

Quindi Riassumendo:

( 5 MT+0 PT+ 0 BT+0 BB + 0 PB + 5 MB ) + 80 W = 100

E Continuo a non capire

[Mich_]

Non capisco neppure io ...
Forse c'e` qualche altro elemento che interagisce.

Puoi provare a vedere con la "developer bar" di FF (o equivalente per altri browser).