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;
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)