Esta postagem descreve:
- Quando utilizar “preenchimento” versus “margem” em CSS?
- Como utilizar “margem” em CSS?
- Como utilizar “preenchimento” em CSS?
Quando utilizar “preenchimento” versus “margem” em CSS?
CSS “ margem ' e ' preenchimento ” são usadas para projetar a interface. Eles também são utilizados para especificar a lacuna ou espaço extra entre os elementos. No entanto, essas duas propriedades diferem uma da outra em termos de funcionalidade.
Aqui, vamos explicar algumas distinções entre ambas as propriedades:
| margem | preenchimento |
|---|---|
| margin fornece espaço fora do elemento. | padding fornece espaço dentro do conteúdo do elemento. |
| Podemos definir uma margem de elemento como “ auto ” para definir automaticamente a margem ao redor do elemento. | preenchimento não pode ser definido como automático. 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. | preenchimento suporta apenas valores positivos. |
Como utilizar “margem” em CSS?
Para utilizar o “ margem ” propriedade, primeiro, crie um “ O resultado do código acima indicado é mencionado abaixo: Agora, crie outro “ Saída Agora, aplique a propriedade “margin” na classe “.margin-div”: No código acima, o “ .margin-div ” é utilizado para acessar o elemento div para aplicar as propriedades listadas abaixo: Aqui, você pode ver que definimos com sucesso o “ margem ” propriedade no segundo “ div ' elemento: Para usar a propriedade “padding”, foram utilizados os exemplos mencionados acima. No segundo ' div ” recipiente, use a classe “ padding-div ” para aplicar preenchimento: Saída Para aplicar padding e outras propriedades CSS no “ .padding-div ” classe, dê uma olhada no código fornecido: No código acima mencionado, acessamos o segundo “ div ” elemento usando classe “ .padding-div ”. Definimos a “cor de fundo” e o “tamanho da fonte”. Além disso, o “ preenchimento ” 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” em CSS. O CSS “ margem ” é utilizado para definir o espaçamento ao redor do elemento, enquanto o “ preenchimento ” é usado para adicionar espaçamento ao redor do conteúdo do elemento. Para aplicar a propriedade de margem ou preenchimento, primeiro crie um “ div ” e especifique a classe. Depois disso, acesse a classe pelo nome da classe e aplique o “ margem ' e ' preenchimento ” propriedades. Este post explicou o uso de margin vs padding em CSS.
< div aula = 'linux' >
< p > Linuxhint é um dos melhores sites de tutoriais < / p >
< / div >
< div aula = 'margem-div' estilo = 'borda: 1px preto sólido' >
< p >Linuxhint é um dos melhores sites de tutoriais.< br >
< / p >
< div >
fundo- cor : rgb ( 199 , 238 , 205 ) ;
Fonte- Tamanho : médio;
fronteira : 3px rgb ( 114 , 250 , 114 ) ;
margem: 100px 100px 100px 100px;
}
Como utilizar “preenchimento” em CSS?
< p > Linuxhint é um dos melhores sites de tutoriais < / p >
< / div >
< div aula = 'padding-div' estilo = 'borda: 1px preto sólido' >
< p >Linuxhint é um dos melhores sites de tutoriais.< br >
< / p >
< / div >
fundo- cor : rgb ( 199 , 238 , 205 ) ;
Fonte- Tamanho : médio;
preenchimento: 50px 50px 50px 50px;
}
Conclusão