High-Tech Santé Médecine Droit-Finances

Mettre

de la musique

sur une DSi

Rechercher : dans
Par :

Html, div, style et margin

Dernière réponse le 20 oct 2008 à 18:48:02 santiago69, le 14 oct 2008 à 17:40:59 
 Signaler ce message aux modérateurs

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



Il y a 10 types de personnes dans le monde
Ceux qui comprennent le binaire et les autres.

Meilleures réponses pour « html, div, style et margin » dans :
DHTML - La notion de couche Voir Qu'est-ce qu'une couche? Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des...
HTML - div - span Voir
Probléme calque html <div position:absolute Voir
Créer une DIV avec transparence VoirLes DIV transparents en CSS Vous voulez rendre une DIV transparente ? Rien de plus simple, il suffit d'utiliser une des techniques CSS suivantes : Rendre le DIV ainsi que le contenu transparent Le div lui même sera transparent, mais aussi...
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
Introduction au HTML VoirPrésentation du HTML Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent...
Posez votre question Répondre

1

romandelc, le 14 oct 2008 à 17:52:32

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+

   
Répondre à romandelc

2

santiago69, le 14 oct 2008 à 18:40:33

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.




Il y a 10 types de personnes dans le monde
Ceux qui comprennent le binaire et les autres.

   
Répondre à santiago69

3

Stef60, le 14 oct 2008 à 18:58:46

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>

   
Répondre à Stef60

4

 santiago69, le 20 oct 2008 à 18:48:02

Bravo Stef60,
Le probleme venait bien de la propriete position.
Merci bcp>

Il y a 10 types de personnes dans le monde
Ceux qui comprennent le binaire et les autres.

   
Répondre à santiago69
Posez votre question Répondre
Ils ont besoin de votre aide