Ako spravovať medzery a výplne v responzívnych dizajnoch

Táto praktická príručka ilustruje metódu riadenia rozstupov a výplne v responzívnych dizajnoch.

Ako spravovať medzery a výplne v responzívnych dizajnoch?

Výplň a medzery v responzívnych dizajnoch je možné spravovať pomocou CSS. Praktická ukážka riadenia medzier a vypchávok je uvedená nižšie.

Krok 1: Vytvorte štruktúru HTML

Najprv vytvorte štruktúru HTML a nejaký text v nej pomocou

a

značky:

< telo >
< h2 > Responzívne CSS výplň a medzery < / h2 >
< div > Tento prvok CSS má výplň 80 pixelov a medzery 40 pixelov. < / div >
< / telo >

Krok 2: Použite CSS

---

---

Teraz aplikujme CSS na

tag. Najprv nastavte „ vypchávka “hodnota nehnuteľnosti na “ 80 pixelov “, aby sa vytvoril priestor okolo prvku. Ďalej nastavte „ marža “hodnota nehnuteľnosti na “ 40 pixelov “ a vytvorte priestor okolo prvkov mimo hranice. Nakoniec použite „ hranica ” a špecifikujte orámovanie a farbu na vytvorenie orámovania:

div {
vypchávka : 80 pixelov ;
marža : 40 pixelov ;
hranica : 1px pevný zelená ;
}

Vyššie uvedený výstup potvrdzuje, že boli použité medzery a výplň.

Skontrolujeme, či reaguje alebo nie, stiahnutím okna prehliadača:

Po stiahnutí okna sa obsah správal responzívne, čo potvrdzuje, že aplikovaná výplň a medzery sú citlivé.

Záver

Na správu medzier a výplní v responzívnych návrhoch existujú vlastnosti CSS. Ak chcete pridať výplň do responzívneho dizajnu pomocou „ vypchávka ' nehnuteľnosť. Podobne je možné pridať medzery v responzívnom dizajne pomocou „ marža ' nehnuteľnosť. Tento zápis predstavil používateľom riešenie na správu medzier a výplne v responzívnych dizajnoch.