Quando usar margem vs preenchimento no CSS
Este post descreve:
- Quando utilizar o “preenchimento” vs “margem” no CSS?
- Como utilizar "margem" no CSS?
- Como utilizar o “preenchimento” no CSS?
Quando utilizar o “preenchimento” vs “margem” no CSS?
CSS “margem" e "preenchimento”As propriedades são usadas para projetar a interface. Eles também são utilizados para especificar a lacuna extra ou o espaço entre os elementos. No entanto, essas duas propriedades diferem entre si em termos de funcionalidade.
Aqui, explicaremos algumas distinções entre as duas propriedades:
| margem | preenchimento |
|---|---|
| A margem fornece espaço fora do elemento. | O preenchimento fornece espaço dentro do conteúdo do elemento. |
| Podemos definir uma margem de elemento como “auto”Para definir automaticamente a margem em torno do elemento. | O preenchimento não pode ser definido como auto. O usuário deve especificar os valores para definir o espaço dentro do elemento. |
| A margem não afetou o estilo de um elemento. | Quando aplicamos a cor de fundo ao elemento, isso afetará o estilo de um elemento. |
| Podemos definir valores positivos e negativos como margens. | O preenchimento suporta apenas valores positivos. |
Como utilizar "margem" no CSS?
Para utilizar o “margem”Propriedade, primeiro, crie um“”Contêiner e atribua a classe. Por exemplo, atribuímos a classe nomeada como “Linuxhint”. Em seguida, incorpore algum texto em uma tag de parágrafo “ Linuxhint é um dos melhores sites de tutoriais O resultado do código acima mencionado é mencionado abaixo: Agora, crie outro “”Contêiner com a classe“margem-div”E aplique o“estiloAtributo como “borda: 1px preto sólido”. Depois disso, adicione algum texto no “ Linuxhint é um dos melhores sites de tutoriais. Saída Agora, aplique a propriedade "margem" em ".Margin-Div ”Classe: No código acima, o “.margem-div”É utilizado para acessar o elemento div para aplicar propriedades abaixo da listada: Aqui, você pode ver que definimos com sucesso o “margem”Propriedade no segundo“div" elemento: Como utilizar o “preenchimento” no CSS? Para usar a propriedade "preenchimento", os exemplos acima mencionados foram utilizados. No segundo "div“Contêiner, use a classe“Padding-Div”Para aplicar o preenchimento: Linuxhint é um dos melhores sites de tutoriais Linuxhint é um dos melhores sites de tutoriais. Saída Para aplicar o preenchimento e outras propriedades do CSS no “.Padding-Div”Classe, dê uma olhada no código fornecido: No código acima mencionado, acessamos o segundo “div”Elemento usando a classe“.Padding-Div”. Definimos a “cor de fundo” e “tamanho da fonte”. Além disso, o “preenchimento”A propriedade é usada para adicionar espaço ao redor do conteúdo do elemento de cada lado como“50px”. Saída Explicamos as diferenças e usos de "preenchimento" e "margem" no CSS. Conclusão O CSS “margem”É utilizado para definir o espaçamento ao redor do elemento, enquanto“preenchimento”É usado para adicionar espaçamento em torno do conteúdo do elemento. Para aplicar a propriedade de margem ou preenchimento, primeiro, crie um “div“Container e especificar a classe. Depois disso, acesse a classe pelo nome da classe e aplique o “margem" e "preenchimento”Propriedades. Este post explicou o uso de margem vs preenchimento no CSS.
Background-Color: RGB (199, 238, 205);
tamanho de fonte: médio;
borda: 3px RGB (114, 250, 114);
margem: 100px 100px 100px 100px;
Background-Color: RGB (199, 238, 205);
tamanho de fonte: médio;
preenchimento: 50px 50px 50px 50px;