Compte le nombre de mots utilisés dans une chaîne
La propriété CSS margin-block-start
La propriété CSS margin-block-start définit la marge en haut d'un élément. Cette propriété est disponible à partir de la version CSS3 et peut être utilisée avec les éléments en bloc.
Syntaxe
.element {
margin-block-start: valeur;
}
Valeurs possibles
- auto - la marge sera déterminée automatiquement par le navigateur
- nombre - définit la marge en utilisant une longueur absolue (par exemple, 20px ou 1em)
- pourcentage - définit la marge en utilisant un pourcentage de la taille de la boîte parent (par exemple, 50%)
- initial - définit la valeur initiale de la propriété
- inherit - hérite la valeur de la propriété de l'élément parent
Utilisation
La propriété margin-block-start est utile pour ajouter de l'espace en haut d'un élément. Elle peut être utilisée pour séparer les éléments et pour donner plus de marge à un élément.
Exemples
Exemple d'utilisation de la propriété margin-block-start :
Contenu d'un élément avec une marge en haut
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété margin-block-start </title>
<style>
div {
background-color: lightblue;
}
div.ex1 {
border: solid black 1px;
margin-block-start: 35px;
}
</style>
</head>
<body>
<h1>CSS la propriété margin-block-start</h1>
<div>Un élément div sans marges spécifiées.</div>
<div>Un autre élément div sans marges spécifiées.</div>
<div class="ex1">Cet élément div a une marge de 35
pixels au début dans le sens du bloc.
Donc il est séparé par un espace de 35px de
l'élément qui le précède.
</div>
<div>Un élément div sans marges spécifiées.</div>
<div>Un élément div sans marges spécifiées.</div>
</body>
</html>
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.marginBlockStart="100px" |
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 | 12.1 | 73 |
Conseils et astuces pour l'utilisation de la propriété CSS margin-block-start
- Utiliser avec modération - Il est important de ne pas surcharger la mise en page avec de grandes marges en haut d'un élément, ce qui peut rendre le site web moins attrayant et plus difficile à naviguer.
- Mettre en œuvre une grille de mise en page - En utilisant une grille de mise en page, vous pouvez facilement définir des marges uniformes pour les éléments sur votre site web.
- Utiliser pour séparer les éléments - La propriété margin-block-start peut être utilisée pour séparer les éléments les uns des autres, en les séparant d'une certaine quantité de marge en haut.
- Combiner avec d'autres propriétés de marge - La propriété margin-block-start peut être utilisée en combinaison avec d'autres propriétés de marge, telles que margin-block-end et margin-inline, pour contrôler l'espacement autour d'un élément.
En utilisant la propriété CSS margin-block-start avec soin et en la combinant avec d'autres propriétés de marge, vous pouvez améliorer la mise en page de votre site web et en faire une expérience plus agréable pour les utilisateurs.