Como gerenciar espaçamento e preenchimento em designs responsivos

Este guia prático ilustrará o método para gerenciar espaçamento e preenchimento em designs responsivos.

Como gerenciar espaçamento e preenchimento em designs responsivos?

O preenchimento e o espaçamento em designs responsivos podem ser gerenciados usando CSS. Uma demonstração prática do gerenciamento do espaçamento e preenchimento é fornecida a seguir.

Etapa 1: crie uma estrutura HTML

Primeiro, crie uma estrutura HTML e algum texto dentro dela usando

e

Tag:

< corpo >
< h2 > Preenchimento e espaçamento CSS responsivo < / h2 >
< divisão > Este elemento CSS possui preenchimento de 80px e espaçamento de 40px. < / divisão >
< / corpo >

Etapa 2: aplicar CSS

---

---

Agora, vamos aplicar CSS no

marcação. Primeiro, defina o “ preenchimento ”valor da propriedade para“ 80 px ”Para criar o espaço ao redor do elemento. Em seguida, defina o “ margem ”valor da propriedade para“ 40 pixels ”E crie espaço em torno dos elementos fora da borda. Por último, use o “ fronteira ”Propriedade e especifique a borda e a cor para criar uma borda:

divisão {
preenchimento : 80 px ;
margem : 40 pixels ;
fronteira : 1px sólido verde ;
}

A saída acima confirma que o espaçamento e o preenchimento foram aplicados.

Vamos verificar se ele responde ou não contraindo a janela do navegador:

Ao contrair a janela, o conteúdo se comportou de forma responsiva, o que confirma que o preenchimento e o espaçamento aplicados são responsivos.

Conclusão

Para gerenciar espaçamento e preenchimento em designs responsivos, existem propriedades CSS. Para adicionar preenchimento no design responsivo usando o “ preenchimento ' propriedade. Da mesma forma, o espaçamento pode ser adicionado no design responsivo usando o “ margem ' propriedade. Este artigo apresentou aos usuários uma solução para gerenciar espaçamento e preenchimento em designs responsivos.