Ten post opisuje:
- Kiedy używać „dopełnienia” a „marginesu” w CSS?
- Jak wykorzystać „margines” w CSS?
- Jak wykorzystać „dopełnienie” w CSS?
Kiedy używać „dopełnienia” a „marginesu” w CSS?
CSS „ margines ' oraz ' wyściółka ” są używane do projektowania interfejsu. Służą również do określania dodatkowego odstępu lub odstępu między elementami. Jednak te dwie właściwości różnią się od siebie funkcjonalnością.
Tutaj wyjaśnimy pewne różnice między obiema właściwościami:
| margines | wyściółka |
|---|---|
| margines zapewnia miejsce na zewnątrz elementu. | dopełnienie zapewnia przestrzeń wewnątrz zawartości elementu. |
| Możemy ustawić margines elementu jako „ automatyczny ”, aby automatycznie ustawić margines wokół elementu. | dopełnienia nie można ustawić jako automatycznego. Użytkownik musi określić wartości, aby ustawić przestrzeń wewnątrz elementu. |
| Margines nie wpłynął na styl elementu. | Kiedy zastosujemy kolor tła do elementu, wpłynie to na styl elementu. |
| Jako marginesy możemy ustawić zarówno wartości dodatnie, jak i ujemne. | dopełnienie obsługuje tylko wartości dodatnie. |
Jak wykorzystać „margines” w CSS?
Aby skorzystać z „ margines ”, najpierw utwórz „
< dz klasa = „Linuks” >
< p > Linuxhint to jedna z najlepszych stron z samouczkami < / p >
< / dz >
Wynik powyższego kodu jest wymieniony poniżej:
Teraz utwórz kolejny „
< dz klasa = 'margin-div' styl = „obramowanie: 1 piksel jednolity czarny” >
< p >Linuxhint to jedna z najlepszych stron z samouczkami.< br >
< / p >
< dz >
Wynik
Teraz zastosuj właściwość „margin” w klasie „.margin-div”:
dział-marginesu {tło- kolor : rgb ( 199 , 238 , 205 ) ;
czcionka- rozmiar : średni;
granica : 3px rgb ( 114 , 250 , 114 ) ;
margines: 100px 100px 100px 100px;
}
W powyższym kodzie „ dział-marginesu ” służy do uzyskiwania dostępu do elementu div w celu zastosowania poniższych właściwości:
- “ kolor tła ” służy do zastosowania koloru w tle.
- “ rozmiar czcionki ” służy do dostosowania rozmiaru czcionki.
- “ margines ” przydziela przestrzeń poza elementem. Na przykład ustawiliśmy właściwość „margin” jako „ 100 pikseli ”.
Tutaj możesz zobaczyć, że pomyślnie ustawiliśmy „ margines ”nieruchomość na drugim” dz ' element:
Jak wykorzystać „dopełnienie” w CSS?
W celu wykorzystania właściwości „dopełnienia” wykorzystano powyższe przykłady. W sekundę ' dz ” pojemnik, użyj klasy „ dopełnienie-div ”, aby zastosować wypełnienie:
< dz klasa = „Linuks” >< p > Linuxhint to jedna z najlepszych stron z samouczkami < / p >
< / dz >
< dz klasa = 'wypełnienie-div' styl = „obramowanie: 1 piksel jednolity czarny” >
< p >Linuxhint to jedna z najlepszych stron z samouczkami.< br >
< / p >
< / dz >
Wynik
Aby zastosować dopełnienie i inne właściwości CSS na „ .dopełnienie-div ”, spójrz na podany kod:
.dopełnienie-div {tło- kolor : rgb ( 199 , 238 , 205 ) ;
czcionka- rozmiar : średni;
wypełnienie: 50px 50px 50px 50px;
}
W powyższym kodzie uzyskaliśmy dostęp do drugiego „ dz ”element używający klasy” .dopełnienie-div ”. Ustawiliśmy „kolor tła” i „rozmiar czcionki”. Ponadto „ wyściółka ” służy do dodawania przestrzeni wokół zawartości elementu z każdej strony jako „ 50px ”.
Wynik
Wyjaśniliśmy różnice i zastosowania „dopełnienia” i „marginesu” w CSS.
Wniosek
CSS” margines ” służy do ustawiania odstępów wokół elementu, podczas gdy „ wyściółka ” służy do dodawania odstępów wokół zawartości elementu. Aby zastosować właściwość marginesu lub dopełnienia, najpierw utwórz „ dz ” kontener i określ klasę. Następnie uzyskaj dostęp do klasy według nazwy klasy i zastosuj „ margines ' oraz ' wyściółka ' nieruchomości. W tym poście wyjaśniono użycie marginesu i wypełnienia w CSS.