oujood.com

CSS La propriété : margin

La propriété de feuille de style css margin css permet de gérer les quatres marges extérieures (droite, gauche, haute, basse) d'un élément HTML ou XHTML
..........

chercher |

Les propriétés CSS

CSS les marges extérieurs

Définition et utilisation:La propriété margin

La propriété CSS margin est utilisée pour définir l'espacement extérieur d'un élément HTML. Elle permet de créer un espace entre l'élément et les éléments adjacents, ainsi que de définir les marges supérieure, inférieure, gauche et droite de l'élément.

La propriété margin(marge extérieure) est un raccourcie qui fixe l'ensemble des propriétés de marge extérieures dans une seule déclaration.

L'ensemble des propriétés css de marge extérieures sont:


Exemple 1:
margin:10px 5px 15px 20px;

Dans cet exemple :

  • La marge du haut est 10px
  • La marge de droite est 5px
  • La marge du bas est 15px
  • La marge de gauche est 20px

Exemple 2:
margin:10px 5px 15px;

Dans cet exemple :

  • La marge du haut est 10px
  • Les marges de droite et de gauche sont 5px
  • La marge du bas est 15px

Exemple 3:
margin:10px 5px;

Dans cet exemple :

  • Les marges du haut et de bas sont 10px
  • Les marges de droite et du gauche sont 5px
margin:10px;
  • toute les marges sont 10px

Note: Les valeurs négatives sont autorisées.

      Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>CSS la propriété margin </title>
  
    <style>
	p{width:500px;border:solid 1px black;}
        .a {
			margin: 40px 30px;
        }
		 .b {
			margin: 30px;
        }
		 .c {
			margin: 20px 10px 5px 15px;
        }
		
    </style>
	
</head>
  
<body>
    <p class="a">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam adipiscing vitae proin sagittis nisl. 
    </p>
	<p class="b">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam adipiscing vitae proin sagittis nisl. 
    </p>
	<p class="c">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam adipiscing vitae proin sagittis nisl. 
    </p>
</body>  
</html>

Valeurs par défaut 0
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS1
Syntaxe JavaScript: object.style.margin="10px 5px"

Valeurs de la propriété :margin

Valeur Description
auto l'explorateur calcule la marge automatiquement
nombre définie la marge en px ou cm ...
% un pourcentage de la largeur de lélément parent
inherit Indique que le paramètre de la propriété doit être héritée de l'élément parent.
Internet Explorer (IE8 y compris) ne supporte pas cette valeur

Comment utiliser la propriété margin

La propriété margin peut être utilisée de différentes manières en fonction de ce que vous voulez accomplir. Voici quelques exemples :

  • Pour définir une marge de 10px autour de tous les côtés d'un élément, vous pouvez utiliser : margin: 10px;
  • Pour définir une marge différente pour chaque côté de l'élément, vous pouvez utiliser : margin: 10px 20px 30px 40px; (la première valeur définit la marge supérieure, la deuxième la marge droite, la troisième la marge inférieure et la quatrième la marge gauche)
  • Pour définir une marge différente pour le haut et le bas, mais la même pour les côtés, vous pouvez utiliser : margin: 10px 20px; (la première valeur définit la marge supérieure et inférieure, la deuxième la marge droite et gauche)

Pourquoi utiliser la propriété margin

La propriété margin est très utile pour créer de l'espacement entre les éléments de votre page web. Elle peut être utilisée pour :

  • Créer des marges entre les éléments pour les séparer visuellement
  • Créer un espace entre l'élément et les bords de la page
  • Aligner les éléments les uns par rapport aux autres

Il est important de noter que la propriété margin ne modifie pas la taille de l'élément lui-même, mais uniquement l'espace autour de celui-ci.

Conclusion

La propriété CSS margin est un outil puissant pour créer de l'espacement entre les éléments de votre page web. Elle peut être utilisée pour séparer visuellement les éléments, aligner les éléments les uns par rapport aux autres et créer des marges entre les éléments et les bords de la page. Il est important de comprendre comment utiliser cette propriété pour créer une mise en page propre et bien organisée pour votre site web.

Il est également important de noter qu'il existe d'autres propriétés CSS liées à la marge, comme padding (qui définit l'espacement intérieur de l'élément) et border (qui définit une bordure autour de l'élément). En utilisant ces propriétés ensemble, vous pouvez créer des mises en page plus avancées et personnalisées pour votre site web.

En résumé, la propriété CSS margin est un outil essentiel pour la mise en page de votre site web. Elle permet de créer de l'espacement entre les éléments et de les aligner les uns par rapport aux autres pour créer une présentation professionnelle et agréable pour les utilisateurs.



Voir aussi nos tutoriel :

Elément XSLT XSL sort

Elément XSLT XSL sort

fonction ltrim

Supprime les espaces (ou d'autres caractères) de d but de chaîne

border-right-color

Définit la couleur de la bordure droite