Proximité des marges
Chantier
Cette page est en chantier.
Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).
Usage
L'utiliser pour augmenter ou diminuer la proximité d'un objet par rapport à un autre. Cela vient modifier les espaces blancs entre deux éléments afin d'indiquer si les éléments sont liés ou non. De plus, ces classes permettent à des éléments de contenu figurant dans une grille et ne figurant pas dans une grille d'exister dans la même rangée.
Conception et codage
Utilisation de base
↥ Marge du haut
Élargir ou rétrécir la marge du haut par défaut d'un élément (en-tête, tableau, liste) ou d'un objet de conception (panneau, classe « well », grille...)
Détails
.mrgn-tp-0= 0px.mrgn-tp-sm= 5px.mrgn-tp-md= 15px.mrgn-tp-lg= 30px.mrgn-tp-xl= 50px
↧ Marge du bas
Élargir ou rétrécir la marge du bas par défaut d'un élément (en-tête, tableau, liste) ou d'un objet de conception (panneau, classe « well », grille...)
Détails
.mrgn-bttm-0= 0px.mrgn-bttm-sm= 5px.mrgn-bttm-md= 15px.mrgn-bttm-lg= 30px.mrgn-bttm-xl= 50px
↤ Marge de gauche
Élargir ou rétrécir la marge de gauche par défaut d'un élément (en-tête, tableau, liste) ou d'un objet de conception (panneau, classe « well », grille...)
Détails
.mrgn-lft-0= 0px.mrgn-lft-sm= 5px.mrgn-lft-md= 15px.mrgn-lft-lg= 30px.mrgn-lft-xl= 50px
↦ Marge de droite
Élargir ou rétrécir la marge de droite par défaut d'un élément (en-tête, tableau, liste) ou d'un objet de conception (panneau, classe « well », grille...)
Détails
.mrgn-rght-0= 0px.mrgn-rght-sm= 5px.mrgn-rght-md= 15px.mrgn-rght-lg= 30px.mrgn-rght-xl= 50px
Bonne utilisation
Points de conformité :
- L'utiliser pour élargir ou rétrécir l'espace blanc entre des objets
- Comprenez et mettez en œuvre les principes à l'appui connexes
Mauvaise utilisation
Point d'observation :
- N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Utilisation améliorée
Fonctions complémentaires
Des caractéristiques et des comportements complémentaires sont disponibles.
Principes à l'appui
L'augmentation ou la diminution de la proximité et de l'espace blanc indique que soit des éléments de contenu sont associés, soit ils ne sont pas liés.
[Traduction] En perception visuelle, le principe de la proximité est très simple : les choses qui sont spatialement rapprochées les unes des autres sont considérées comme liées. Nous pouvons utiliser ce principe pour indiquer clairement lorsque des éléments [...] sont associés et lorsqu'ils sont séparés.
Rapprochez les choses qui sont liées et distancez les choses qui doivent être considérées comme séparées.
Nous pouvons appliquer le principe de la proximité à l'envers : les éléments qui sont distancés les uns des autres sont considérés comme séparés.
[Traduction] Le principe de la proximité nécessite que les éléments liés soient groupés visuellement, ce qui crée moins d'encombrement et qui offre une mise en page plus organisée. Les éléments qui ne sont pas liés les uns aux autres devraient être plus éloignés les uns des autres pour souligner leur absence de relation.
Une utilisation efficace des espaces blancs et le groupement des éléments liés sont essentiels afin d'appliquer à votre site Web une hiérarchie visuelle claire.
- Date de modification: