92 votes

Un moyen mnémotechnique pour l'ordre des propriétés raccourcies CSS margin et padding.

Je ne me souviens jamais de l'ordre des propriétés abrégées pour définir la marge ou le remplissage dans une déclaration. C'est-à-dire :

margin-top:    2px;
margin-bottom: 4px;
margin-left:   3px;
margin-right:  8px;

peut s'écrire comme suit

margin: 2px 8px 4px 3px;

Oui, je comprends que l'on peut visualiser l'ordre en pensant à une horloge, en commençant à midi et en allant dans le sens des aiguilles d'une montre. Mais j'oublie toujours cela. J'ai besoin de me rappeler l'ordre haut, droite, bas, gauche textuellement.

D'où, T B L R T R B L.

Quelque chose du genre [R-nom] [B-verbe] [L-nom] est peut-être la solution, mais je sens que je manque d'inspiration. Si quelqu'un a trouvé un moyen mnémotechnique utile pour cela, j'aimerais bien le savoir. Comme un bon mème, je suis sûr qu'une fois que j'ai quelque chose dans la tête, je ne risque pas de l'oublier.

NOTE : Cette question donnait des informations incorrectes - l'ordre (comme indiqué dans certains commentaires et réponses) est le suivant En haut à droite En bas à gauche . (heh, vous voyez ce que je veux dire ? -- dland)

22 votes

C'est T R B L, tu as vraiment faire ont du mal à s'en souvenir

10 votes

C'est trop pour quiconque connaît les horloges analogiques. Les abstractions comme les mots et les acronymes ne sont pas naturelles pour l'esprit humain. Se souvenir de T R B L et convertir manuellement chaque lettre en une orientation physique rend la vie plus compliquée qu'elle ne doit l'être. Il vaut mieux se souvenir de l'ordre visuellement, on travaille sur un support visuel dans ce contexte après tout :D.

2 votes

Il faut aussi se souvenir de ce qui se passe si on ne donne que deux ou trois valeurs. Par exemple "margin : 3em 5em ;" et "margin : 3em 5em 6em ;". Dans le premier cas, 3em est utilisé pour le haut et le bas, et 5 pour les côtés gauche et droit. Dans le second, 3 pour le haut, 5 pour la gauche et la droite, et 6 pour le bas. Je suppose qu'il est facile de se souvenir de ce qui se passe si une seule valeur est donnée.

187voto

Paul Dixon Points 122033

Si vous ne le faites pas correctement, il y aura des TRouBLes.

9 votes

Pas de TRouBLe à retenir si vous supprimez les voyelles

5 votes

@zzapper : OUch --- EEEks. Je me suis trompé et j'ai enlevé les consonnes.

0 votes

78voto

Yuval Adam Points 59423

En fait, l'horloge fonctionne parfaitement. C'est la façon la plus intuitive de s'en souvenir, du moins pour moi.

1 votes

Et cela fonctionne aussi sur le plan pictural... la plupart du temps, vous allez de toute façon penser de manière visuelle.

25voto

Paul Dixon Points 122033

Logique de la bordure d'un rectangle ?

1 votes

Je ne l'avais jamais entendue, mais je l'aime bien :)

21voto

Stephane Kouakou Points 1159

Pourquoi ne pas se rappeler que l'ordre va dans le sens des aiguilles d'une montre en partant du HAUT :

HAUT -> DROITE -> BAS -> GAUCHE

16voto

Paul Dixon Points 122033

Une autre tentative :

Tyrannosaurus Rex : Gros lézard

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X