Välilyöntien ja täyteen hallinta reagoivissa malleissa

Tämä käytännöllinen opas havainnollistaa menetelmää, jolla hallitaan responsiivisten mallien välilyöntejä ja täyteyksiä.

Kuinka hallita välilyöntejä ja täyttöjä responsiivisissa malleissa?

Responsiivisten mallien täyttöjä ja välejä voidaan hallita CSS:n avulla. Käytännön esitys välien ja pehmusteiden hallinnasta on alla.

Vaihe 1: Luo HTML-rakenne

Luo ensin HTML-rakenne ja tekstiä sen sisään käyttämällä

ja

tunnisteet:

< kehon >
< h2 > Responsiivinen CSS-täyte ja -välit < / h2 >
< div > Tämän CSS-elementin täyte on 80 pikseliä ja väli 40 pikseliä. < / div >
< / kehon >

Vaihe 2: Ota CSS käyttöön

---

---

Otetaan nyt CSS käyttöön

tag. Aseta ensin ' pehmuste ' omaisuuden arvo ' 80 pikseliä ” tehdäksesi tilaa elementin ympärille. Aseta seuraavaksi ' marginaali ' omaisuuden arvo ' 40 pikseliä ” ja luoda tilaa rajan ulkopuolisten elementtien ympärille. Käytä lopuksi ' rajaa ”-ominaisuutta ja määritä reunus ja väri reunuksen luomiseksi:

div {
pehmuste : 80 pikseliä ;
marginaali : 40 pikseliä ;
rajaa : 1px kiinteä vihreä ;
}

Yllä oleva tulos vahvistaa, että väli ja täyte on käytetty.

Tarkastetaan, onko se responsiivinen vai ei, supistamalla selainikkuna:

Supistamalla ikkunan sisältö on käyttäytynyt responsiivisesti, mikä vahvistaa, että käytetty täyte ja välilyönnit ovat responsiivisia.

Johtopäätös

Responsiivisten mallien välien ja täyteen hallintaa varten on olemassa CSS-ominaisuuksia. Voit lisätä responsiiviseen suunnitteluun pehmusteen käyttämällä ' pehmuste ” omaisuutta. Vastaavasti responsiiviseen suunnitteluun voidaan lisätä välilyöntejä käyttämällä ' marginaali ” omaisuutta. Tämä kirjoitus on esitellyt käyttäjille ratkaisun välien ja täyteen hallintaan responsiivisissa malleissa.