HTML5 élément canvas Dessiner avec l\rélément canvas
La propriété CSS margin-block-end
La propriété CSS margin-block-end est une propriété avancée de mise en forme qui définit la marge à la fin d'un élément en bloc. Cette propriété est utilisée pour déterminer l'espace entre l'élément en question et les éléments suivants dans la direction du bloc, qui est généralement de haut en bas.
Syntaxe générale
La syntaxe générale de la propriété margin-block-end est la suivante:
élément {
margin-block-end: valeur;
}
Ici, "élément" représente l'élément HTML que vous voulez styliser et "valeur" représente la valeur de la marge que vous souhaitez définir.
Utilisation
La propriété margin-block-end peut être utilisée avec des éléments en bloc tels que des paragraphes <p>, des en-têtes <h1>, <h2>, etc. pour définir l'espace entre eux. Par exemple, pour définir une marge de 1 em à la fin de chaque paragraphe, vous pouvez utiliser le code suivant:
Exemple : Copier le code
p {
margin-block-end: 1em;
}
Valeurs possibles
Les valeurs possibles pour la propriété margin-block-end sont:
- auto - définit une marge automatique qui est déterminée par le navigateur en fonction du contenu et des autres styles associés à l'élément
- nombre - définit la marge en utilisant une longueur absolue telle que px, em, rem, etc. Par exemple,
margin-block-end: 20px;définit une marge de 20 pixels à la fin de l'élément - pourcentage - définit la marge en utilisant un pourcentage de la taille de la boîte conteneur. Par exemple ,
margin-block-end: 10%;définit une marge de 10% de la taille de la boîte conteneur à la fin de l'élément - initial - définit la valeur par défaut de la propriété, généralement 0
- inherit - hérite la valeur de la propriété du parent de l'élément
Il est important de noter que la propriété margin-block-end est une propriété avancée et n'est pas prise en charge par tous les navigateurs. Il est donc recommandé de l'utiliser avec précaution et de tester la compatibilité avec les différents navigateurs avant de la déployer dans un projet de production.
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.marginBlockEnd="20px" |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 87 | 87 | 41 | 18.1 | 73 |
Voici un exemple concret d'utilisation de la propriété margin-block-end:
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété margin-block-end </title>
<style>
h2 {
margin-block-end: 2em;
}
p {
width:400px;
margin-block-end: 1em;
}
</style>
</head>
<body>
<h2>Titre 1</h2>
<p>Paragraphe 1 : 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.</p>
<p>Paragraphe 2 : 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.</p>
<h2>Titre 2</h2>
<p>Paragraphe 3 : 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.</p>
</pre>
<p>Ici, nous avons défini une marge de 2 em à la fin de chaque en-tête
de niveau 2 <strong><h2></strong> et une marge de 1 em à
la fin de chaque paragraphe <strong><p></strong>, ce qui
crée un espace visuel séparant les différents éléments sur la page.
</p>
</body>
</html>