Sådan administrerer du mellemrum og polstring i responsive designs

Denne praktiske vejledning vil illustrere metoden til at styre mellemrum og polstring i responsive designs.

Hvordan administrerer man afstand og polstring i responsive designs?

Polstringen og afstanden i responsive designs kan styres ved hjælp af CSS. En praktisk demonstration af håndteringen af ​​afstanden og polstringen er givet nedenfor.

Trin 1: Opret en HTML-struktur

Først skal du oprette en HTML-struktur og noget tekst inde i den ved hjælp af

og

tags:

< legeme >
< h2 > Responsiv CSS-polstring og mellemrum < / h2 >
< div > Dette CSS-element har en polstring på 80px og en afstand på 40px. < / div >
< / legeme >

Trin 2: Anvend CSS

---

---

Lad os nu anvende CSS på

tag. Først skal du indstille ' polstring ' ejendomsværdi til ' 80 px ” for at skabe rummet omkring elementet. Indstil derefter ' margen ' ejendomsværdi til ' 40 px ” og skabe rum omkring elementer uden for grænsen. Brug endelig ' grænse ” egenskab og angiv kanten og farven for at oprette en kant:

div {
polstring : 80 px ;
margen : 40 px ;
grænse : 1 px solid grøn ;
}

Ovenstående output bekræfter, at mellemrum og polstring er blevet anvendt.

Lad os kontrollere, om det er responsivt eller ej, ved at trække browservinduet sammen:

Ved at trække vinduet sammen har indholdet opført sig responsivt, hvilket bekræfter, at den anvendte polstring og mellemrum er responsiv.

Konklusion

For at administrere mellemrum og polstring i responsive designs findes der CSS-egenskaber. For at tilføje polstring i det responsive design ved hjælp af ' polstring ” ejendom. På samme måde kan mellemrum tilføjes i det responsive design ved hjælp af ' margen ” ejendom. Denne opskrivning har præsenteret brugerne for en løsning til at styre mellemrum og polstring i responsive designs.