Jak zarządzać odstępami i dopełnieniem w projektach responsywnych

Ten praktyczny przewodnik ilustruje metodę zarządzania odstępami i dopełnieniem w responsywnych projektach.

Jak zarządzać odstępami i dopełnieniem w projektach responsywnych?

Dopełnieniem i odstępami w projektach responsywnych można zarządzać za pomocą CSS. Poniżej znajduje się praktyczna demonstracja zarządzania odstępami i dopełnieniem.

Krok 1: Utwórz strukturę HTML

Najpierw utwórz strukturę HTML i trochę tekstu w niej, używając

I

tagi:

< ciało >
< h2 > Responsywne dopełnienie i odstępy CSS < / h2 >
< div > Ten element CSS ma dopełnienie 80 pikseli i odstępy 40 pikseli. < / div >
< / ciało >

Krok 2: Zastosuj CSS

---

---

Teraz zastosujmy CSS na

etykietka. Najpierw ustaw „ wyściółka ”wartość właściwości do” 80 pikseli ”, aby zrobić przestrzeń wokół elementu. Następnie ustaw opcję „ margines ”wartość właściwości do” 40 pikseli ” i stworzyć przestrzeń wokół elementów znajdujących się poza granicami. Na koniec użyj opcji „ granica ” i określ obramowanie oraz kolor, aby utworzyć obramowanie:

div {
wyściółka : 80 pikseli ;
margines : 40 pikseli ;
granica : 1 px solidny zielony ;
}

Powyższe dane wyjściowe potwierdzają, że zastosowano odstępy i dopełnienie.

Sprawdźmy czy jest responsywna czy nie, zaciskając okno przeglądarki:

Zwężając okno, zawartość zachowuje się responsywnie, co potwierdza, że ​​zastosowane dopełnienie i odstępy działają responsywnie.

Wniosek

Aby zarządzać odstępami i dopełnieniem w projektach responsywnych, istnieją właściwości CSS. Aby dodać dopełnienie w responsywnym projekcie za pomocą „ wyściółka ' nieruchomość. Podobnie odstępy można dodać w projekcie responsywnym za pomocą opcji „ margines ' nieruchomość. W tym artykule przedstawiono użytkownikom rozwiązanie do zarządzania odstępami i dopełnieniem w responsywnych projektach.