Une des quelques propriétés de "margin" est de pouvoir prendre une valeur négative. Elles se présentent à l'inverse d'une valeur positive que l'on peut voir dans l'exemple ci-dessous
Exemple:
Le code css
.div1 { width:200px;
height:100px;
border:2px solid #f00;
}
.div2 { width:200px;
height:100px;
border:2px solid #00f;
}
Les deux Divs se touchent car le margin de chaque div est par défaut à zéro.
En définissant un margin positif, les deux Divs vont s'écarter
Exemple:
Le code css
.div1 { width:200px;
height:100px;
margin-bottom:30px;
border:2px solid #f00;
}
.div2 { width:200px;
height:100px;
border:2px solid #00f;
}
La Div bleue descend de 30 pixels lorsque la Div rouge à un margin-bottom de +30 pixels.
Il s'ensuit que si la Div rouge a un margin-bottom négatif de -30 pixels, la Div bleue montera d'autant et chevauchera la Div rouge.
Exemple:
Le code css
.div1 { width:200px;
height:100px;
margin-bottom:-30px;
border:2px solid #f00;
}
.div2 { width:200px;
height:100px;
border:2px solid #00f;
}
L'effet sera évidemment le même si c'est la Div bleue qui a un margin-top de -30 pixels.
Exemple:
Le code css
.div1 { width:200px;
height:100px;
border:2px solid #f00;
}
.div2 { width:200px;
height:100px;
margin-top:-30px;
border:2px solid #00f;
}
De la même mani�re il est possible de déplacer une Div à droite ou à gauche.
Que ce passe-t-il si la Div rouge a un margin-left positif de 30 pixels.
La Div rouge se décalera de 30 pixels sur la droite!
Exemple:
Le code css
.div1 { width:200px;
height:100px;
margin-left:30px;
border:2px solid #f00;
}
.div2 { width:200px;
height:100px;
border:2px solid #00f;
}
Avec une valeur négative de -30 pixels pour le margin-left, la Div rouge se décalera alors sur la gauche!
Exemple:
Le code css
.div1 { width:200px;
height:100px;
margin-left:-30px;
border:2px solid #f00;
}
.div2 { width:200px;
height:100px;
border:2px solid #00f;
}
Utilisation et effet spéciaux
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
Il est ainsi possible de décaler l'image sur la droite de façon à chevaucher le cadre et cr�er un effet.
Cependant Internet Explorer supprime la partie de l'image qui va sortir du cadre.
Il existe un fixe heureusement et il suffit de mettre position:relative; au float pour l'image.
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
Le code css
#one p { float:left; width:200px;
padding:10px;
border:2px solid #999; }
#one img { position:relative;
float:right;
width:200px;
margin:0 -40px .5em .5em; }
Le code html
<div id="one"> <p> <img src="lamer.jpg" /> bla bla bla bla bla bla bla bla bla bla bla bla </p> </div>
Il est aussi possible de faire des mises en page originales avec cette méthode comme dans l'exemple suivant:
Mon titre
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
Le code css
#two { margin-top: 30px; padding: 20px; border: 1px solid #ccc; background: #eff; }
#two h2 { position: relative; float: left;
margin: -30px 0 15px 0; padding: 8px;
background: #ccc; color: #036;
font: bold 1em Arial, Helvetica, sans-serif; }
#two p { clear: left; color: #036;
font-size: 0.8em; line-height: 130%; }
Le code html
<div id="two"> <h2>Mon titre</h2> <p> Lorem ipsum dolor sit amet, cons ... etc. </p> </div>