Kako upravljati razmakom i ispunom u responzivnom dizajnu

Ovaj praktični vodič ilustrirat će metodu upravljanja razmakom i ispunom u responzivnom dizajnu.

Kako upravljati razmakom i ispunom u responzivnom dizajnu?

Ispunom i razmakom u responzivnom dizajnu može se upravljati pomoću CSS-a. U nastavku se nalazi praktična demonstracija upravljanja razmakom i ispunom.

Korak 1: Napravite HTML strukturu

Prvo stvorite HTML strukturu i neki tekst unutar nje pomoću

i

oznake:

< tijelo >
< h2 > Responzivni CSS Padding i Spacing < / h2 >
< div > Ovaj CSS element ima padding od 80px i razmak od 40px. < / div >
< / tijelo >

Korak 2: Primijenite CSS

---

---

Sada primijenimo CSS na

označiti. Prvo postavite ' podstava ' vrijednost svojstva za ' 80 px ” kako biste napravili prostor oko elementa. Zatim postavite ' margina ' vrijednost svojstva za ' 40 px ” i stvorite prostor oko elemenata izvan granice. Na kraju, upotrijebite ' granica ” i navedite obrub i boju za stvaranje obruba:

div {
podstava : 80 px ;
margina : 40 px ;
granica : 1px čvrsta zelena ;
}

Gornji izlaz potvrđuje da su primijenjeni razmak i ispuna.

Provjerimo odgovara li ili ne skupljanjem prozora preglednika:

Sažimanjem prozora, sadržaj se ponašao responzivno, što potvrđuje da su primijenjeni ispuni i razmaci responzivni.

Zaključak

Za upravljanje razmacima i ispunama u responzivnim dizajnima postoje CSS svojstva. Za dodavanje ispuna u responzivni dizajn pomoću ' podstava ” vlasništvo. Slično tome, razmak se može dodati u responzivni dizajn pomoću ' margina ” vlasništvo. Ovaj tekst je korisnicima predstavio rješenje za upravljanje razmacima i ispunama u responzivnim dizajnima.