Kiedy używać marginesu w porównaniu z wyściółką w CSS
Ten post opisuje:
- Kiedy użyć „wyściółki” vs „margines” w CSS?
- Jak wykorzystać „margines” w CSS?
- Jak wykorzystać „wyściółkę” w CSS?
Kiedy użyć „wyściółki” vs „margines” w CSS?
CSS „margines" I "wyściółka„Właściwości są używane do projektowania interfejsu. Są również wykorzystywane do określania dodatkowej luki lub przestrzeni między elementami. Jednak te dwie właściwości różnią się od siebie pod względem funkcjonalności.
Tutaj wyjaśnimy pewne rozróżnienia między obiema właściwościami:
| margines | wyściółka |
|---|---|
| Margines zapewnia przestrzeń poza elementem. | Wyściółka zapewnia przestrzeń wewnątrz zawartości elementu. |
| Możemy ustawić margines elementu jako „automatyczny”Aby automatycznie ustawić margines wokół elementu. | Wyściółka nie może być ustawiona jako automatyczne. 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. |
| Możemy ustawić pozytywne i ujemne wartości jako marginesy. | Wyściółka obsługuje tylko wartości dodatnie. |
Jak wykorzystać „margines” w CSS?
Aby wykorzystać „margines„Własność, po pierwsze, stwórz„”Pojemnik i przypisz klasę. Na przykład przypisaliśmy klasę o nazwie „Linuxhint". Następnie osadziłem trochę tekstu w znaczniku akapitu „ Linuxhint to jedna z najlepszych witryn samouczka Wynik wyżej wymienionego kodu jest wspomniany poniżej: Teraz stwórz kolejne „„Pojemnik z klasą”margines”I zastosuj„styl”Atrybut jako„Border: 1px Solid Black". Następnie dodaj tekst w „ Linuxhint to jedna z najlepszych witryn samouczka. Wyjście Teraz zastosuj nieruchomość „margines” na „.klasa margine-div ”: W powyższym kodzie „„.margines”Jest wykorzystywany do dostępu do elementu DIV do zastosowania nieruchomości poniżej listy: Tutaj widać, że pomyślnie ustaliliśmy „margines„Nieruchomość drugiego”div" element: Jak wykorzystać „wyściółkę” w CSS? Aby użyć właściwości „wyściółki”, wykorzystywano powyższe przykłady. W sekundę "div„Pojemnik, użyj klasy”Padding-Div„Aby zastosować wyściółkę: Linuxhint to jedna z najlepszych witryn samouczka Linuxhint to jedna z najlepszych witryn samouczka. Wyjście Zastosować wyściółkę i inne właściwości CSS na „.Padding-Div„Klasa, spójrz na dostarczony kod: W wyżej wymienionych kodeksach uzyskaliśmy dostęp do drugiego „div”Element za pomocą klasy„.Padding-Div". Ustawiliśmy „kolor tła” i „wielkości czcionki”. Co więcej, „wyściółka„Właściwość służy do dodawania przestrzeni wokół zawartości elementu z każdej strony jako„50px". Wyjście Wyjaśniliśmy różnice i zastosowania „wyściółki” i „marginesu” w CSS. Wniosek CSS „margines”Jest wykorzystywany 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ć nieruchomość margines lub wyściółkę, najpierw stwórz „div”Kontener i określ klasę. Następnie uzyskaj dostęp do klasy według klasy i zastosuj „margines" I "wyściółka" nieruchomości. Ten post wyjaśnił użycie marginesu a wyściółka w CSS.
kolor tła: RGB (199, 238, 205);
Rozmiar czcionki: medium;
granica: 3px RGB (114, 250, 114);
Margines: 100px 100px 100px 100px;
kolor tła: RGB (199, 238, 205);
Rozmiar czcionki: medium;
Wyściółka: 50px 50px 50px 50px;