Hoe u de afstand en opvulling in responsieve ontwerpen kunt beheren

Deze praktische gids illustreert de methode om spatiëring en opvulling in responsieve ontwerpen te beheren.

Hoe beheer ik de afstand en opvulling in responsieve ontwerpen?

De opvulling en spatiëring in responsieve ontwerpen kunnen worden beheerd met behulp van CSS. Hieronder vindt u een praktische demonstratie van het beheer van de afstand en de opvulling.

Stap 1: Maak een HTML-structuur

Maak eerst een HTML-structuur en wat tekst erin met behulp van

En

tags:

< lichaam >
< h2 > Responsieve CSS-opvulling en spatiëring < / h2 >
< div > Dit CSS-element heeft een opvulling van 80px en een spatiëring van 40px. < / div >
< / lichaam >

Stap 2: CSS toepassen

---

---

Laten we nu CSS toepassen op het

label. Stel eerst de “ opvulling “waarde van onroerend goed naar “ 80px ” om de ruimte rond het element te maken. Stel vervolgens de “ marge “waarde van onroerend goed naar “ 40px ” en creëer ruimte rond elementen buiten de grens. Gebruik ten slotte de “ grens ” en geef de rand en kleur op om een ​​rand te maken:

div {
opvulling : 80px ;
marge : 40px ;
grens : 1px stevig groente ;
}

De bovenstaande uitvoer bevestigt dat spatiëring en opvulling zijn toegepast.

Laten we controleren of het reageert of niet door het browservenster te verkleinen:

Door het venster samen te trekken, heeft de inhoud zich responsief gedragen, wat bevestigt dat de toegepaste opvulling en spatiëring responsief zijn.

Conclusie

Om de spatiëring en opvulling in responsieve ontwerpen te beheren, bestaan ​​er CSS-eigenschappen. Om opvulling toe te voegen aan het responsieve ontwerp met behulp van de “ opvulling ' eigendom. Op dezelfde manier kan er afstand worden toegevoegd in het responsieve ontwerp met behulp van de “ marge ' eigendom. Dit artikel heeft de gebruikers een oplossing geboden om de spatiëring en opvulling in responsieve ontwerpen te beheren.