oujood.com

Comprendre la propriété CSS margin-block : syntaxe, valeurs et utilisation

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

chercher |

Margin-block en CSS

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;
}

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 :

  • valeur : Les valeurs numériques en pixels (par exemple, 50px), les pourcentages (par exemple, 10%), les unités CSS telles que em, rem, etc. (par exemple, 2em), ou la valeur auto valeur par défaut .
  • initial : Valeur initiale définie par le navigateur pour cette propriété.
  • inherit : La valeur de la marge extérieure de l'élément est héritée de son parent.

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éfautauto
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.marginBlock="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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion878766 14.1 73



Voir aussi nos tutoriel :

php fonction date

La fonction date

Tutorial XPATH

Tutorial XPATH

Balise output

Définit le résultat d'un calcul