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

Signaler
Messages postés
478
Date d'inscription
mercredi 7 mars 2001
Statut
Membre
Dernière intervention
12 septembre 2016
-
Messages postés
478
Date d'inscription
mercredi 7 mars 2001
Statut
Membre
Dernière intervention
12 septembre 2016
-
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


4 réponses

Messages postés
251
Date d'inscription
jeudi 31 mai 2007
Statut
Membre
Dernière intervention
22 avril 2009
36
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>
8
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 61706 internautes nous ont dit merci ce mois-ci

Messages postés
25
Date d'inscription
vendredi 20 juin 2008
Statut
Membre
Dernière intervention
28 octobre 2008
4
Salut,

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

shéma : https://htmldog.com/guides/css/beginner/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+
Messages postés
478
Date d'inscription
mercredi 7 mars 2001
Statut
Membre
Dernière intervention
12 septembre 2016
194
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.



Messages postés
478
Date d'inscription
mercredi 7 mars 2001
Statut
Membre
Dernière intervention
12 septembre 2016
194
Bravo Stef60,
Le probleme venait bien de la propriete position.
Merci bcp>