margin CSS propriété

Définition de la CSS margin.

La propriété de Marge CSS margin permet de spécifier individuellement ou globalement l'espace entre la bordure d'un élément HTML ou XHTML et la bordure de l'élément adjacent pour chaque côté.
Où se trouve la marge extérieure : margin
La Css margin est un raccourci qui permet de spécifier en une seule fois les propriétés Css margin-top, margin-right, margin-bottom et margin-left.
A ne pas confondre avec les marges Css intérieures dites .

Exemple de syntaxe CSS margin :
margin : 5px;
margin : 1px 5px;
margin : 1px 5px 6px;
margin : 1px 2px 3px 5px;

La propriété de feuille de style margin Css peut prendre une ou quatre valeurs de marges :

Conditions d'application de la CSS margin.

La feuille de style margin css est applicable sur l'ensemble des balises HTML ou XHTML, sauf si ces dernières sont de type table-caption, table et inline-table.

Héritage des valeurs Css de margin.

Les balises filles HTML ou XHTML n'héritent pas de la propriété Css margin de leur parent.

Problème d'interprétation de margin en Css.

Toutes les feuilles de style de marges extérieures posent un problème d'interprétation suivant la DTD.
Voir l'explication du bug dans la feuille de style . Ce problème est valable pour les navigateurs antérieurs à 2010.

Conditions d'animation de margin en CSS3.

La CSS margin est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Règles de syntaxes CSS pour margin.

Règle d'écriture de la Css margin

Si la feuille de style margin Css est suivie :

Calcul d'une valeur Css de margin en %

La valeur du margin est calculée en fonction de la valeur calculée du de son premier parent qui n'est pas de type inline.

Si l'élément est en position absolue, la valeur est calculée en fonction de la valeur calculée de du parent servant de point d'origine. Cependant, certain navigateur y ajoutent la valeur calculée des horizontaux pour calculer la marge.

Fusions de marges

Situer les marges extérieures Les marges gauches et droites extérieures ne fusionnent jamais avec les autres marges extérieures horizontales (gauche ou droite) d'un autre élément.
Les marges hautes et basses extérieures fusionnent avec les autres marges extérieures verticales (haute ou basse) d'un autre élément.

Propriétés CSS utilisées dans le raccourci margin.

Spécifier les marges individuellement

Si vous ne voulez pas utiliser le raccourci margin, vous pouvez définir individuellement chaque marge en utilisant une des propriétés CSS suivante :

  • , espace entre la bordure haute et la bordure basse de l'élément adjacent.
  • , espace au-delà de la bordure droite et la bordure gauche de l'élément adjacent.
  • , espace au-delà de la bordure basse et la bordure haute de l'élément adjacent.
  • , espace au-delà de la bordure gauche et la bordure droite de l'élément adjacent.

Compatibilités navigateurs de la propriété margin

Détails des versions de la CSS margin
Résumé du support navigateurs de la CSS margin

Equivalence de la CSS margin en HTML.

La feuille de style css margin n'a pas d'équivalence en HTML ou XHTML.

Exemples et astuces CSS pour utiliser margin

Les marges ul ou ol suivant les navigateurs

Les marges gauches d'un ou sont gérés différemment suivant les navigateurs.

Firefox, Mozilla, Netscape utilisent pour faire une marge droite padding-left.
Exemple avec un padding-left:0

Internet Explorer et Opéra utilisent pour faire une marge droite margin-left.
Exemple avec un margin-left:0

Pour que cela fonctionne sur toutes les navigateurs :

Code CSS : 
ul {margin-left: 10px; padding-left: 0;}
//ou
ul {margin-left: 0; padding-left: 10px;}

Votre avis sur la définition margin en CSS

Votez pour la définition CSS margin

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/margin-css.html Votes: 4.5 / 5 - 28 votes
Cliquez sur une étoile pour voter.