Reageerivate kujunduste vahede ja polsterduse haldamine

See praktiline juhend illustreerib tundlike kujunduste vahede ja polsterduse haldamise meetodit.

Kuidas hallata tundlikes kujundustes vahekaugusi ja polsterdust?

Responsiivsete kujunduste polsterdust ja vahesid saab hallata CSS-i abil. Allpool on toodud vahekauguse ja polsterduse haldamise praktiline tutvustus.

1. samm: looge HTML-struktuur

Esiteks looge HTML-struktuur ja selle sees tekst

ja

sildid:

< keha >
< h2 > Tundlik CSS-i täidis ja tühikud < / h2 >
< div > Sellel CSS-elemendil on täidis 80 pikslit ja vahekaugus 40 pikslit. < / div >
< / keha >

2. samm: rakendage CSS-i

---

---

Nüüd rakendame CSS-i

tag. Esmalt määrake ' polsterdus ' vara väärtus väärtusele ' 80 pikslit ”, et muuta elemendi ümber ruumi. Järgmisena määrake ' marginaal ' vara väärtus väärtusele ' 40 pikslit ” ja luua ruumi väljaspool piiri asuvate elementide ümber. Lõpuks kasutage ' piir ” atribuuti ning määrake äärise loomiseks ääris ja värv:

div {
polsterdus : 80 pikslit ;
marginaal : 40 pikslit ;
piir : 1px tahke roheline ;
}

Ülaltoodud väljund kinnitab, et vahed ja polsterdus on rakendatud.

Kontrollime, kas see reageerib või mitte, sulgedes brauseriakna:

Akna kokkutõmbamisel on sisu käitunud tundlikult, mis kinnitab, et kasutatud polsterdus ja vahekaugus on tundlik.

Järeldus

Reageerivate kujunduste vahede ja polsterduse haldamiseks on olemas CSS-i atribuudid. Responsiivsele kujundusele polsterduse lisamiseks kasutage nuppu ' polsterdus ” vara. Samamoodi saab reageerivasse kujundusse lisada tühikuid, kasutades ' marginaal ” vara. See kirjutis on andnud kasutajatele lahenduse, kuidas hallata tundlikes kujundustes vahekaugusi ja polsterdust.