La fonction date
la propriété CSS margin-block est un outil pour gérer les marges en haut et en bas d'un élément HTML. Elle peut simplifier votre code et vous aider à mieux organiser votre page web
La propriété CSS margin-block définit la marge extérieure en haut et en bas d'un élément HTML. Elle est utilisée pour créer de l'espace autour de l'élément et pour mieux organiser la page. La marge extérieure sépare l'élément de ses voisins et de son conteneur parent.
En d'autre terme la propriété css margin-block est une racourcie pour les propriété css :
La propriété margin-block est une nouvelle propriété CSS introduite dans CSS3 pour gérer la marge en haut et en bas d'un élément. Elle remplace les anciennes propriété CSS : margin-top et margin-bottom.
La syntaxe générale de la propriété margin-block est la suivante :
element { margin-block: valeur|valeur|initial|inherit; }
Où element est l'élément HTML auquel vous souhaitez appliquer la marge extérieure en haut et en bas, et valeur est la valeur de la marge. Les valeurs possibles pour la propriété margin-block sont :
La propriété margin-block peut également être définie avec une seule valeur pour gérer les marges en haut et en bas d'un élément, dans ce cas les marge du haut et du bas sont égales :
element { margin-block: valeur ; }
Voici un exemple d'utilisation de margin-block :
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>CSS la propriété margin-block </title> <style> .container { background-color: #ccc; margin-block: 50px; } div{border:solid 1px black; width: 500px; padding: 20px; height: 100px;} </style> </head> <body> <div class="container"> <p>Je suis un élément avec une marge extérieure en haut et en bas définie à 50px</p> </div> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ornare lectus sit amet est placerat in egestas. Nulla aliquet porttitor lacus luctus accumsan. </div> </body> </html>
En utilisant la propriété margin-block, nous pouvons facilement définir la marge en haut et en bas d'un élément sans avoir à utiliser plusieurs propriétés CSS séparées. Cela rend le code plus propre et plus facile à maintenir.
Il est à noter que la propriété margin-block n'est pas encore prise en charge par tous les navigateurs et n'est actuellement disponible que dans les navigateurs de nouvelle génération. Il est donc important de faire des tests de navigateur pour vous assurer que votre code fonctionne correctement dans les navigateurs que vous ciblez. Si vous souhaitez prendre en compte les navigateurs plus anciens, il est recommandé d'utiliser des propriétés CSS plus traditionnelles telles que margin-top et margin-bottom pour gérer les marges en haut et en bas d'un élément.
Valeurs par défaut | auto |
---|---|
Inherited: | non |
Animable : | oui En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.marginBlock="20px" |
Explorateur | |||||
---|---|---|---|---|---|
Verssion | 87 | 87 | 66 | 14.1 | 73 |