Kā pārvaldīt atstarpes un polsterējumu adaptīvajos noformējumos

Šī praktiskā rokasgrāmata ilustrēs metodi, kā pārvaldīt atstarpi un polsterējumu adaptīvā dizainā.

Kā pārvaldīt atstarpes un polsterējumu adaptīvajos noformējumos?

Adaptīvo dizainu polsterējumu un atstarpes var pārvaldīt, izmantojot CSS. Tālāk ir sniegts praktisks atstarpju un polsterējuma pārvaldības demonstrējums.

1. darbība: izveidojiet HTML struktūru

Vispirms izveidojiet HTML struktūru un tajā esošo tekstu

un

tagi:

< ķermeni >
< h2 > Adaptīvs CSS pildījums un atstarpes < / h2 >
< div > Šim CSS elementam ir 80 pikseļu polsterējums un 40 pikseļu atstarpe. < / div >
< / ķermeni >

2. darbība: izmantojiet CSS

---

---

Tagad izmantosim CSS

tagu. Vispirms iestatiet ' polsterējums 'īpašuma vērtība uz ' 80 pikseļi ”, lai izveidotu vietu ap elementu. Pēc tam iestatiet “ starpība 'īpašuma vērtība uz ' 40 pikseļi ” un izveidot telpu ap elementiem ārpus robežas. Visbeidzot izmantojiet ' robeža ” rekvizītu un norādiet apmali un krāsu, lai izveidotu apmali:

div {
polsterējums : 80 pikseļi ;
starpība : 40 pikseļi ;
robeža : 1 pikselis ciets zaļš ;
}

Iepriekš minētā izvade apstiprina, ka ir izmantotas atstarpes un polsterējums.

Pārbaudīsim, vai tas ir adaptīvs, saslēdzot pārlūkprogrammas logu:

Samazinot logu, saturs ir reaģējis, kas apliecina, ka izmantotais polsterējums un atstarpes ir atsaucīgi.

Secinājums

Lai pārvaldītu atstarpes un pildījumu adaptīvos noformējumos, pastāv CSS rekvizīti. Lai adaptīvajam dizainam pievienotu polsterējumu, izmantojot “ polsterējums ” īpašums. Līdzīgi atstarpes var pievienot adaptīvajā dizainā, izmantojot “ starpība ” īpašums. Šis raksts ir iepazīstinājis lietotājus ar risinājumu, kā pārvaldīt atstarpes un polsterējumu atsaucīgos dizainos.