DEV Community

Carla França
Carla França

Posted on

1

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.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay