De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.
Notação abreviada para elementos css
Colaboração: Rubens Queiroz de Almeida
Data de Publicação: 21 de setembro de 2015
Em arquivos de estilo CSS, podemos definir um elemento como:
margin-top:1px; margin-right:2px; margin-bottom:5px; margin-left:1px;
O elemento margin pode ser definido também como:
margin: 1px 2px 5px 1px;
Mas como saber a ordem em que os valores são escritos? Na verdade é bastante simples, os valores são especificados no sentido horário. Começamos pelo valor do topo (margin-top), em seguida passamos para a direita (margin-right), fundo (margin-bottom), e finalmente a esquerda (margin-left).
Pense que cada caractere economizado com uma notação abreviada é um caractere a menos a ser transmitido quando alguém acessa sua página. Com a notação completa, primeiro exemplo, temos 70 caracteres, já na segunda notação, com abreviação, temos apenas 25 caracteres, uma economia substancial.
A imagem abaixo, do artigo "CSS Shorthand Clockwise Rule", ilustra muito bem este conceito:
 |
Mas podemos abreviar ainda mais. Podemos utilizar três, dois ou mesmo apenas um parâmetro. Observe pelas cores nas imagens como os parâmetros são calculados. Por exemplo, se especificarmos apenas um valor (margin: 1px;), o mesmo valor se aplicará a todos os lados (topo, fundo, direita e esquerda).
Com três parâmetros
 |
Com dois parâmetros
 |
Com um parâmetro
 |
Esta regra pode ser utilizada também para a diretiva CSS padding.
Referência: Este texto foi baseado em grande parte no artigo CSS Shorthand Clockwise Rule
Adicionar comentário
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
- Your name, rating, website address, town, country, state and comment will be publicly displayed if entered.
- Aside from the data entered into these form fields, other stored data about your comment will include:
- Your IP address (not displayed)
- The time/date of your submission (displayed)
- Your email address will not be shared. It is collected for only two reasons:
- Administrative purposes, should a need to contact you arise.
- To inform you of new comments, should you subscribe to receive notifications.
- A cookie may be set on your computer. This is used to remember your inputs. It will expire by itself.
This policy is subject to change at any time and without notice.
These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:
- Although the administrator will attempt to moderate comments, it is impossible for every comment to have been moderated at any given time.
- You acknowledge that all comments express the views and opinions of the original author and not those of the administrator.
- You agree not to post any material which is knowingly false, obscene, hateful, threatening, harassing or invasive of a person's privacy.
- The administrator has the right to edit, move or remove any comment for any reason and without notice.
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
Comentários