Um mnemônico para a ordem das propriedades abreviadas de margem e preenchimento de CSS


85

Nunca consigo me lembrar da ordem da propriedade abreviada para definir a margem ou preenchimento em uma declaração. Isso é:

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

pode ser escrito como

margin: 2px 8px 4px 3px;

Sim, entendo que se pode visualizar a ordem pensando em um relógio, começando ao meio-dia e girando no sentido horário. Mas eu continuo me esquecendo disso. Preciso lembrar a ordem superior, direita, inferior, esquerda textualmente.

Portanto, TBLR TRB L.

Algo como Este [substantivo-R] [verbo-B] [substantivos-L] é talvez o caminho a percorrer, mas me sinto sem inspiração. Se alguém encontrou um mnemônico útil para isso, adoraria ouvi-lo. Como um bom meme, tenho certeza de que, quando algo se alojar em meu cérebro, dificilmente esquecerei.

NOTA : Esta pergunta forneceu informações incorretas - a ordem (conforme observado em alguns dos comentários e respostas) é Superior direito Inferior esquerdo . (heh, entende o que quero dizer? - dland)


21
é TRBL, você realmente fazer tem lembrança problemas que
apesar

10
Isso é um exagero para qualquer pessoa familiarizada com relógios analógicos. Abstrações como palavras e acrônimos não são naturais para a mente humana, lembrar TRBL e então converter manualmente cada letra em uma orientação física está tornando a vida mais complicada do que o necessário para ser IMO. Muito melhor lembrar a ordem visualmente, você está trabalhando em um meio visual neste contexto, afinal: D.
mahemoff

2
Também deve se lembrar do que acontece se apenas dois ou três valores forem fornecidos. Por exemplo "margin: 3em 5em;" e "margem: 3em 5em 6em;". No primeiro, 3em é usado para a parte superior e inferior, e 5 para os lados esquerdo e direito. No segundo, 3 para cima, 5 para esquerda e direita e 6 para baixo. Presumo que seja fácil lembrar o que acontece se apenas um valor for fornecido.
Harry Pehkonen

2
Adoro as respostas, mas essa deve ser a pergunta mais ridícula apenas por causa da maneira como você a aborda. Você me perdeu completamente com os substantivos e verbos. É uma caixa, coloque um relógio nela e acabe com isso.
Eric Bishard

Respostas:



76

Na verdade, o relógio funciona perfeitamente. É a maneira mais intuitiva de lembrar, pelo menos para mim.


1
E funciona pictoricamente também ... na maioria das vezes, você vai pensar em linhas visuais de qualquer maneira.
Armstrongest


21

Por que não lembrar apenas que a ordem vai no sentido horário começando do TOPO:

TOPO -> DIREITO -> FUNDO -> ESQUERDO



12

Pense no sentido horário, é a maneira mais fácil. Começa no topo e gira ... muito mais fácil de lembrar do que uma frase boba (desde que você saiba ler um relógio ...)







2

TRouBLe é o melhor para mim. E se apenas 3 valores forem mostrados, é Top, Sides, Bottom - que para usuários do Reino Unido significa TSB (o banco que o governo teve que resgatar usando nosso dinheiro) - então TRouBLe e TSB estão intimamente ligados!


2

TROUBLE é sempre um lembrete secundário para mim, já que primeiro penso na direção horária, mas posso precisar lembrar por onde você começa; no entanto, a abreviação de 3 valores sempre me confundiu até que percebi que o valor do meio (ou o segundo) precisa representar dois valores (os lados). Então, três valores - o segundo sendo 2 valores - me ajudam a lembrar disso.


2

O truque do relógio funciona para o atalho de 4 números, mas há alguma lógica para os atalhos de 3 e 2 números? 1 número e se aplica a tudo, e isso faz sentido, mas

1 = (T/R/b/l) 
2 = (T=b) (R=l)   
3 = (T) (R=l) (b)  
4 = (T) (R) (b) (l)

Simplesmente não parece lógico. Mas ... o primeiro valor pertence ao topo, o segundo pertence à direita, o terceiro é a parte inferior e o quarto é a esquerda; Um número não é especificado se for igual ao seu oposto. Horizontal e vertical DEVEM ser declarados, a menos que todos os valores sejam idênticos.

Em outras palavras, você sempre especifica os valores Top e Right, bottom e left fall in conforme necessário.


1

Pense que você está lendo árabe ou hebraico: leia do topo da página, da direita para a esquerda e para baixo. ; P O bom dessa "regra" é que ela também funciona para a versão de 3 valores: top right-and-left bottom

Na verdade, também achei difícil lembrar, mas assim que descobri que era a direção do relógio, foi mais fácil.


1

Isto é

top
right 
bottom 
left

não o que você tem

T hink R ight B ANTES DE L eap


Existe um "você" extra.
ziyuang

1

Sempre há a cidade de TRumBuLl Connecticut



1

Lembre-se da lição de direção:

Vire à direita antes da esquerda


0

Se você tem idade suficiente para se lembrar da série de TV Star Trek original (você sabe, com o capitão Kirk), bem, antes de tudo, você está velho demais. Mas há o episódio " The Trouble with Tribbles ". Ambos os substantivos no título funcionam. Já usei isso no passado, mas também prefiro a analogia do relógio.


0

Sempre que você atacar em uma determinada situação, pense apenas em uma rotação no sentido horário, ou seja, a maneira como o relógio gira de 0 a 60 em uma rotação circular.

A coisa do relógio é mais fácil de lembrar do que a palavra TRouBLe (como resposta marcada) na minha opinião, já que a palavra trouble pertence ao idioma inglês e todas as mentes nativas do idioma inglês podem achar mais fácil lembrar a palavra TRouBLe em relevância para a situação dada, mas não outros que só usam a língua inglesa quando realmente é necessário.

O mesmo não acontece com a rotação horária de um relógio, quando se trata de lembrar algo (como lhe perguntaram), uma vez que a rotação horária é um fenômeno muito conhecido no mundo inteiro.


0

Algumas abreviações (pode-se considerar aquela que soa familiar):

  1. TR OU BL E ( TR OU BL ESHOOT , TR OU BL ESOME )
  2. T E R RI BL E
  3. TR IB BL E
  4. T ele R oyal B ritish L egion
  5. T ARGUMENTO: R oad B asketball L eague
  6. T emporário R evenue B orrowing L imit
  7. T ransformational R ule- B ased G ganho
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.