Propriedade da margem no CSS explicou

As margens são os espaços criados (para melhor estética) em torno de qualquer elemento. A margem é automaticamente definida pelo navegador sendo usado. No entanto, as margens definidas pelo usuário podem ser criadas usando a propriedade de margem CSS. As margens têm quatro lados (geralmente depende do elemento), e a margem de cada lado pode ser definida usando a propriedade de margem.

A propriedade de margem permite definir as margens para as laterais individualmente ou pode criar margens para vários lados simultaneamente. Neste guia descritivo, a propriedade de margem no CSS é explicada e tem os seguintes resultados de aprendizado.

• Trabalho da propriedade de margem em CSS
• Trabalhando da propriedade de margem abreviada
• Uso de propriedades de margem com exemplos

Como a propriedade da margem funciona no CSS

A propriedade de margem no CSS pode funcionar em várias circunstâncias em que você deve dar margens nas laterais (individualmente) ou dar margens usando a propriedade abreviada (vários lados ao mesmo tempo). O trabalho em ambas as situações é discutido aqui.

A margem pode ser dada a lados individuais usando a sintaxe de acordo.

seletor margin-top: value; // no lado superior
seletor margem-bottom: value; // no lado inferior
seletor margin-left: value; // no lado esquerdo
seletor margem-direita: value; // no lado direito

O seletor pode ser qualquer elemento, enquanto o valor é o número usado para fornecer um limite de margem específico. O valor pode ser usado com várias unidades de medição i.e., Auto, comprimento (px, cm, pt), porcentagem (%) e herdamento (conforme a classe pai). O PX é a medição absoluta, enquanto o EM, REM e a porcentagem são as medidas relativas e são melhores (quando comparadas com PX) adequadas para resultados responsivos.

Além das margens desse lado individual, a propriedade de margem de margem também pode ser usada para dar as margens a vários lados simultaneamente. A sintaxe da propriedade de margem abreviada é fornecida abaixo:

seletor margem: value1 value2 value3 value;

O valor1, value2, value3 e value4 representam os lados superior, direita, inferior e esquerda de um elemento.

Como usar a propriedade de margem no CSS

Esta seção fornece alguns exemplos que mostram o uso da propriedade de margem no CSS.

Exemplo 1: dando margens para lados individuais
Neste exemplo, o código escrito abaixo é usado para dar margens a lados individuais.

Propriedade de margem no CSS

Usando margem à direita de 5px
usando margem inferior de 5px
Usando margem superior de 5px
Usando margem à esquerda de 5px

A descrição do código é fornecida abaixo

• Um estilo CSS para o DIV é definido com a largura, a propriedade flutuante e a fronteira
• Quatro classes CSS são criadas denominadas "Top", "Rig", "Bot" e "Lef" que contém a margem (5px) em cada classe
• Essas quatro classes são usadas dentro das divisões (div)

A imagem do código é mostrada abaixo

Saída:

Exemplo 2: dando margens a vários lados simultaneamente
O exemplo acima forneceu as margens aos lados individuais. O código a seguir fornece margem para vários lados simultaneamente

Propriedade de margem no CSS

usando margem de 5% em todos os lados
usando margem de 5% na parte superior/inferior e 10% na esquerda/direita
Usando margem de 2 e 3em para cima e inferior e 4em para a direita/esquerda
Usando margem de 2,4,6,8 pixels na parte superior, direita, inferior, esquerda, respectivamente

O código acima é descrito como

• Quatro classes CSS são criadas denominadas "Sing", "Doubs", "Trip" e "All"
• A classe "pecado" fornece margem de% a todos os lados e a classe "duvide" fornece margem de 5% para cima/inferior e 10% para a direita/esquerda
• A classe "Trip" fornece margem de 2em e 4em para cima para cima de um fundo e 3em para os lados direito/esquerdo
• A classe “All” fornece margem de 2, 4, 6 e 8px para os lados superior, direita, inferior e esquerda

A imagem do código é mostrada abaixo

Saída:

A partir dos exemplos acima, você teria aprendido a aplicabilidade da propriedade da margem nos contextos a seguir:

• aplicando a propriedade de margem a todos os lados individualmente
• dando margens usando a propriedade de margem abreviada

Conclusão

A propriedade de margem no CSS é praticada dando margens de acordo com propriedades definidas pelo usuário. Este artigo demonstra o trabalho e o uso da propriedade de margem no CSS. A propriedade de margem no CSS pode ser usada para dar margens a cada lado individualmente e a propriedade de margem de abreviação pode ser usada para dar margens a vários lados simultaneamente.