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.

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

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more