DEV Community

Carla França
Carla França

Posted on

Declaração resumida e específica

Há quatro formas de estilizar a propriedade de seletores que admite valores diferenciados. Exemplo:

1 - padding: 20px;
2 - padding: 20px 18px;
3 - padding: 20px 18px 28px;
4 - padding: 20px 18px 28px 10px;
Enter fullscreen mode Exit fullscreen mode

A primeira coisa a ser considerada é subscrição do último estilo em relação aos anteriores quando aplicado no seletor. No exemplo acima, significa que a linha 4 substituirá as linhas 1 a 3. Isso ocorre porque é lido de cima para baixo. É uma característica do CSS.

Declarações

Outras qualidades do CSS são a de classificar e abreviar valores. A propriedade padding define a distância entre o conteúdo e as bordas.
Atribuído um único valor, como na linha 1, serão aplicadas de forma resumida para todos os lados.

Na linha 2, iniciamos a forma específica. Aqui temos um espelhamento. O valor 20px definirá as bordas no topo e base e 18px à esquerda e direita;

Na última linha, cada borda receberá o valor determinado, iniciando pelo topo, direita, base e esquerda. Ou seja, basta seguir a direção do relógio.

Exceção

A exceção ocorre na terceira linha do exemplo. Três valores são especificados para padding, sendo 20px para o topo, 18px para a direita e esquerda e 28px para a base. Portanto, o segundo valor configura as margens direita e esquerda.

Top comments (0)