Accueil    CSS    Propriété right
 



style css right  Style CSS right

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété right permet d'appliquer une modification du positionnement horizontal à l'élément qu'elle décrit. Ce décalage horizontal se base sur la position de la limite droite de l'élément et se calcule en fonction de la valeur spécifiée. Il est cependant nécéssaire d'appliquer un positionnement relatif ou absolu à l'élément pour que la propriété soit bien appliquée.

Bien qu'il soit possible de définir le positionnement d'un élément avec les propriétés top, bottom, left et right, il est fréquent de ne définir que le coin haut gauche de l'élément tout en gérant son type de positionnement (absolu ou relatif) et son mode d'affichage (inline ou block).

D'autres paramètres peuvent entrer en ligne de compte pour affiner le positionnement du contenu : le contour (outline), la marge (margin) ou l'espacement (padding) en font partis.



Propriétés pour le style right :




Propriété Définition Valeurs CSS
right Modifie la disposition horizontale de l'élément par rapport à sa limite droite auto
valeur
%
inherit
CSS 1


Exemple d'utilisation du style css right :





Utilsation de la propiété right avec les valeurs auto, 20px et -20px :

<div style="height:100px; width:500px; border:solid 1px black;">
   exemple
   <span style="position:relative; right:auto; padding:10px; border:dashed 1px green;">Bloc en position relative avec right : auto</span>
   exemple
</div>

<div style="height:100px; width:500px; border:solid 1px black;">
   exemple
   <span style="position:relative; right:20px; padding:10px; border:dashed 1px green;">Bloc en position relative avec right : 20px</span>
   exemple
</div>

<div style="height:100px; width:500px; border:solid 1px black;">
   exemple
   <span style="position:relative; right:-20px; padding:10px; border:dashed 1px green;">Bloc en position relative avec right : -20px</span>
   exemple
</div>


Utilsation de la propiété right avec les valeurs auto, 20px et -20px :

exemple

Bloc en position relative avec right : auto

exemple


exemple

Bloc en position relative avec right : 20px

exemple


exemple

Bloc en position relative avec right : -20px

exemple