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)

dland
fonte
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:

175

Se você não acertar, haverá TRouBLe

Paul Dixon
fonte
7
Não é necessário lembrar se você remover vogais
zzapper
5
@zzapper: Ai --- EEEks. Eu entendi errado e removi as consoantes.
Arroto Yaakov de
css-tricks.com/…
Ryan Williams
76

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

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

Lógica complicada da borda do retângulo?

Paul Dixon
fonte
1
Eu não tinha ouvido isso antes, mas eu gosto :)
Adam Rezich
21

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

TOPO -> DIREITO -> FUNDO -> ESQUERDO

Steve
fonte
15

Outra tentativa:

Tiranossauro Rex: Lagarto Grande

Paul Dixon
fonte
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 ...)

Logan Serman
fonte
12

The Really Big Lebowski

Paul Dixon
fonte
8

T R ou B L e.

Adam Rezich
fonte
8

Rotação no tempo, Bit Lame?

Paul Dixon
fonte
6

Experimente as sobras de rosbife?

Paul Dixon
fonte
3

" T op, Right, Bottom, Left"
R eally
B ad
L imerick

Apesar
fonte
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!

Toby
fonte
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.

Mitch Powell
fonte
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.

TRT
fonte
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.

Stein G. Strindhaug
fonte
1

Isto é

top
right 
bottom 
left

não o que você tem

T hink R ight B ANTES DE L eap

DD59
fonte
Existe um "você" extra.
ziyuang
1

Sempre há a cidade de TRumBuLl Connecticut


fonte
1

* T * op * R * amen, * B * ottom, * L * unch

David Horne
fonte
1

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

Vire à direita antes da esquerda

convidado
fonte
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.

Mikekehrli
fonte
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.

R K
fonte
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
drac_o
fonte