CSS - Marges
La propriété margin définit l'espace autour d'un élément HTML. Il est possible d'utiliser des valeurs négatives pour chevaucher le contenu.
Les valeurs de la propriété margin ne sont pas héritées par les éléments enfants. N'oubliez pas que les marges verticales adjacentes (marges du haut et du bas) se réduiront l'une dans l'autre de sorte que la distance entre les blocs ne soit pas la somme des marges, mais seulement la plus grande des deux marges ou la même taille qu'une marge si les deux sont égal.
Nous avons les propriétés suivantes pour définir une marge d'élément.
le margin spécifie une propriété abrégée pour définir les propriétés de marge dans une déclaration.
le margin-bottom spécifie la marge inférieure d'un élément.
le margin-top spécifie la marge supérieure d'un élément.
le margin-left spécifie la marge gauche d'un élément.
le margin-right spécifie la marge droite d'un élément.
Maintenant, nous allons voir comment utiliser ces propriétés avec des exemples.
La propriété Margin
La propriété margin vous permet de définir toutes les propriétés des quatre marges dans une déclaration. Voici la syntaxe pour définir la marge autour d'un paragraphe -
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>Il produira le résultat suivant -
La propriété margin-bottom
La propriété margin-bottom vous permet de définir la marge inférieure d'un élément. Il peut avoir une valeur en longueur,% ou auto.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>Il produira le résultat suivant -
La propriété margin-top
La propriété margin-top vous permet de définir la marge supérieure d'un élément. Il peut avoir une valeur en longueur,% ou auto.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Il produira le résultat suivant -
La propriété margin-left
La propriété margin-left vous permet de définir la marge gauche d'un élément. Il peut avoir une valeur en longueur,% ou auto.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>Il produira le résultat suivant -
La propriété margin-right
La propriété margin-right vous permet de définir la marge droite d'un élément. Il peut avoir une valeur en longueur,% ou auto.
Voici un exemple -
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>Il produira le résultat suivant -