VIVEZ LE
FOOTBALL !

Posez votre question Signaler

Html, div, style et margin [Résolu]

santiago69 483Messages postés 7 mars 2001Date d'inscription 22 avril 2010Dernière intervention - Dernière réponse le 20 oct. 2008 à 18:48
Salut a tous,
Je n'arrive pas a comprendre le comportement de la propriete margin.
Soit la page suivante :
<html><body>
<div style="width:200px ; height:200px ; background:red">
    <div style="margin-left:40px ; margin-top:40px ; width:100px ; height:100px ; background:green">
    </div>
</div>
</body></html>

J'ai fait 3 test : test1.htm test2.htm test3.htm
margin-left est bien calculee entre le bord du premier div et le bord du deuxieme div
pourtant margin-top, est applique entre le bord de la page et le bord du premier div alors qu'il est defini dans le 2e div.
Est ce que quelqu'un peut m'expliquer ?
Cordialement
Santiago
Lire la suite 

Html, div, style et margin »

4 réponses
Réponse
+3
moins plus
Salut,

margin sont les mages extérieures a l'élement
et padding les marges intérieures

shéma : http://htmldog.com/guides/cssbeginner/margins/

margin top est donc la marge extérieure au dessus de l'élement

tu dois donc mettre la marge avec l'élement, tu le met en dehors !

en suite pour la couleur de la marge : margin-color

a+
Ajouter un commentaire
Réponse
+2
moins plus
Bonjour,
tu cherches à faire ca:
<html>
<body>

<div style="width:200px ; height:200px ; background:red; position:absolute;">
<div style="margin-left:40px ; width:100px ; margin-top:40px ;height:100px ; background:green">
</div>
</div>

</body>
</html>


ou ca (plus jolie à mon gout)
<html>
<body style="margin:0 ; paddin:0 ;">

<div style="width:200px ; height:200px ; background:red; position:absolute;">
<div style="margin-left:40px ; width:100px ; margin-top:40px ;height:100px ; background:green">
</div>
</div>

</body>
</html>
Ajouter un commentaire
Réponse
+0
moins plus
Merci romandelc.
As tu bien regarde la source des 3 pages de test que j'ai propose ?
La definition que tu donnes est bien la definition que j'avais.
Cette definition est rigoureusement respectee par margin-left mais comme precise dans ma question, c'est margin-top qui ne respecte pas cette regle.

Il est egalement possible que je n'ai pas compris ta proposition. Dans ce cas peux tu proposer un code html qui fonctionne : je veux que le carre interieur soit separe du carre exterieur de 10 px.



Ajouter un commentaire
Réponse
+0
moins plus
Bravo Stef60,
Le probleme venait bien de la propriete position.
Merci bcp>
Ajouter un commentaire
Ce document intitulé « html, div, style et margin » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?