margin-left |
Marge de gauche |
| CSS |
|
Syntaxe
Paramètres
| Paramètre |
Description |
| paramètres |
Ce paramètre de propriété permet d'indiquer la marge de gauche : |
| auto |
Cet attribut permet d'indiquer que la marge est calculé automatiquement. |
| distance |
Cet attribut permet d'indiquer que la marge calculé en pixels. La valeur par défaut est 0. |
| pourcentage% |
Cet attribut permet d'indiquer que l'espacement est calculé en fonction du pourcentage de la hauteur du document. |
Description
Cette propriété permet de définir la bordure à la gauche entre la fenêtre de navigateur et la page HTML.
Remarques
- Espacement horizontal à gauche : La propriété margin-left permet de définir l'espace externe à gauche d'un élément. Cet espace sépare l'élément de ses
voisins situés à gauche, ce qui est utile pour aligner ou positionner précisément des éléments dans une mise en page.
- Unités flexibles : Comme les autres propriétés de marge, margin-left prend en charge une grande variété d'unités, notamment absolues (px, cm) et
relatives (%, em, rem). Par exemple, margin-left: 10%; positionne l'élément à une distance proportionnelle à la largeur de son conteneur parent.
- Valeur par défaut : Par défaut, margin-left est définie à 0, ce qui signifie qu'aucun espacement supplémentaire n'est ajouté à gauche de l'élément. Si un
espace est visible, il provient d'autres propriétés ou du comportement par défaut des navigateurs.
- Alignement centré avec auto : Une valeur spéciale de margin-left est auto. Lorsqu'elle est utilisée avec margin-right: auto, elle peut centrer
horizontalement un élément à condition que cet élément ait une largeur définie. Cela est couramment utilisé pour centrer des conteneurs.
- Effet dans les mises en page directionnelles : La propriété margin-left est particulièrement utile dans les langues avec une orientation de texte de
gauche à droite (LTR). Dans les langues RTL (droite à gauche), margin-right peut être plus pertinente, mais margin-inline-start et margin-inline-end
sont des alternatives modernes pour gérer ces cas.
- Combinaison avec d'autres propriétés : margin-left peut être combinée avec position et transform pour créer des effets complexes. Par exemple,
en jouant avec margin-left et translateX(), vous pouvez obtenir des animations fluides dans une interface utilisateur.
- Compatibilité avec des modèles de mise en page modernes : Même si des techniques modernes comme Flexbox et CSS Grid remplacent souvent l'utilisation
explicite de marges, margin-left reste utile pour ajuster des espacements spécifiques dans des conteneurs flexibles ou grille.
- Impact sur les flux de documents : L'utilisation de margin-left modifie le flux de mise en page en poussant l'élément vers la droite. Cela peut être utilisé
pour créer des indentations (par exemple, pour des paragraphes) ou pour espacer des éléments alignés verticalement.
Dernière mise à jour : Dimanche, le 20 décembre 2015
