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.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

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

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay