Propriété margin en css

[tryan]

Bonjour,
J'aimerais comprendre pourquoi le code ci dessous (Propriété margin) ne rend pas le résultat escompté...c'est à dire un carré noir parfaitement centré ?
Style css:

.top{
border: 2px solid #000000;
background: #ECCF3E; 
width: 200px;
height: 200px;
}
.rr1{
border: 2px solid #000000;
width: 50px;
height: 50px;
background: #000000;
color: #FFFFFF;
font-weight: bold;
margin: 30px 30px 30px 30px ;
}

Le code:

<div class="top"><div class="rr1">**</div></div>

Et par la même occasion pourquoi celui du dessous me colle un carré noir en haut à gauche alors qu'il devrait être en bas décalé de 50px ?

.margin-bottom {
border: 2px solid #000000;
background: #ECCF3E; 
width: 200px;
height: 200px;
}
.margin-bottom1 {
border: 2px solid #000000;
width: 80px;
height: 80px;
background: #000000;
color: #FFFFFF;
font-weight: bold;
margin-bottom : 50px
}

<div class="margin-bottom">
<div class="margin-bottom1">**</div>
</div>

Merci de vos lumières ^^

 

[Dan_A]

Pour le problème 1, peut-être parce que
30+50+30!=200
essaie avec margin:75px;

Pour le problème 2, je ne suis pas sûr de comprendre.
essaie margin-top:50px au lieu de margin-bottom

( http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions )

 

[tryan]

C'est pas logique ? Si j'ai un carré de 200px de coté et un autre placé à l'intérieure de celui ci de 50px de coté et que je demande une marge de 30px soit 50+(2*30)=110px .Je soustrait donc 110px de 200px qui me donne 90px sinon dit 45px de marge entre le carré intérieure et celui qui l'entoure... donc normalement il devrait être parfaitement centré ... non ?

Pour le numéro 2, je demande selon mon style css que mon carré centrale est une marge de 50px (margin-bottom : 50px en bas par apport au carré qui le contient . La il me le colle en haut à gauche...

Ou est l'erreur?

Merci

 

[Vap]

Dan_A a bien répondu, pourquoi tu ne lis pas ce qu'il dit?

Ta logique me laisse perplexe, qu'as tu fumé?

Peut etre n'as tu pas compris que les entités html sont placées dès que possible en partant du haut vers le bas, et de gauche à droite. Je te conseille d'aller faire un tour sur le site du zero pour réviser tes bases.

 

[jcaron]

C'est pas logique ? Si j'ai un carré de 200px de coté et un autre placé à l'intérieure de celui ci de 50px de coté et que je demande une marge de 30px soit 50+(2*30)=110px .Je soustrait donc 110px de 200px qui me donne 90px sinon dit 45px de marge entre le carré intérieure et celui qui l'entoure... donc normalement il devrait être parfaitement centré ... non ?

Ben non, ça donne 90px à mettre quelque part. Qui a dit que ça devait être réparti à part égales des deux côtés? Par défaut tu alignes à gauche...

Pour le numéro 2, je demande selon mon style css que mon carré centrale est une marge de 50px (margin-bottom : 50px en bas par apport au carré qui le contient . La il me le colle en haut à gauche...

Là encore, tu dis que tu veux 50px de marge en dessous de ton carré, mais rien ne dit qu'il ne peut pas y avoir plus de place. Là aussi, par défaut, tu alignes en haut, donc c'est assez normal.

Je pense que tu devrais relire la spec CSS

Jacques.

 

[tryan]

Vap, promit j'ai rien fumé ^^.
jcaron, raz le bol de lire et re lire ^^.
Bref, j'ai comprit ma connerie, c'est le principal :roll: .
Je partait du principe que si je demandais une marge égal de chaque coté, mon carré ne pouvait être que centré :lol: ..c'était sans prendre en compte les dimensions des carrés eux mêmes!
Pour se servir du CSS faut faire des math. ... chiote :mrgreen: .

Merci pour la compréhension de la chose :wink:

 

[tonguide]

Pour centrer margin:0 auto;
ou margin-left:auto;margin-right:auto;

c'est fait pour.

Une petite particularité si c'est pour centrer après le Body pour que ce soit compatible partout, ne pas oublier de faire un text-align:center; sur le body (puis un text-align:left; pour remettre le tout à gauche dans le bloc qui suit le body)

 

[Vap]

Pour centrer margin:0 auto;
ou margin-left:auto;margin-right:auto;

c'est fait pour.

Ca ne centre que horizontalement.

Pour centrer verticalement, il y a des méthodes, mais aucune aussi simple que ça. Il faut aller sur alsacreation par exemple pour voir ces methodes.

 

[tonguide]

Ah, j'avais pas vu qu'il voulait centrer verticalement.