Hvordan administrere mellomrom og polstring i responsive design

Denne praktiske veiledningen vil illustrere metoden for å administrere mellomrom og polstring i responsive design.

Hvordan administrere mellomrom og polstring i responsive design?

Polstringen og avstanden i responsive design kan administreres ved hjelp av CSS. En praktisk demonstrasjon av håndteringen av avstanden og polstringen er gitt nedenfor.

Trinn 1: Lag en HTML-struktur

Lag først en HTML-struktur og litt tekst i den ved å bruke

og

tagger:

< kropp >
< h2 > Responsiv CSS-polstring og -avstand < / h2 >
< div > Dette CSS-elementet har en polstring på 80px og en avstand på 40px. < / div >
< / kropp >

Trinn 2: Bruk CSS

---

---

La oss nå bruke CSS på

stikkord. Først setter du ' polstring ' eiendomsverdi til ' 80 piksler ” for å gjøre rommet rundt elementet. Deretter setter du ' margin ' eiendomsverdi til ' 40 piksler ” og skape rom rundt elementer utenfor grensen. Til slutt bruker du ' grense ' egenskap og spesifiser kant og farge for å lage en kantlinje:

div {
polstring : 80 piksler ;
margin : 40 piksler ;
grense : 1 px fast grønn ;
}

Ovennevnte utgang bekrefter at mellomrom og polstring er brukt.

La oss sjekke om den er responsiv eller ikke ved å trekke sammen nettleservinduet:

Ved å trekke sammen vinduet har innholdet oppført seg responsivt, noe som bekrefter at utfyllingen og avstanden som er brukt er responsiv.

Konklusjon

For å administrere mellomrom og polstring i responsive design, finnes det CSS-egenskaper. For å legge til polstring i det responsive designet ved å bruke ' polstring ” eiendom. På samme måte kan mellomrom legges til i det responsive designet ved å bruke ' margin ” eiendom. Denne oppskriften har presentert brukerne en løsning for å administrere mellomrom og polstring i responsive design.