Wyściółka CSS vs. Margines

W HTML potrzebujemy CSS do stylizacji stron internetowych dynamicznych lub statycznych. CSS Styling zapewnia naszą stronę widok estetyczny. Estetyka każdej strony internetowej zależy od marginesów i wybiegów używanych w stylu CSS. Padding odnosi się do przestrzeni podanej przez właściwość wyściółki do dowolnego konkretnego elementu na jej granicy. Podczas gdy margines odnosi się do przestrzeni między jednym granicą elementu dotyczącą drugiego granicy elementu lub górnego góry, dna strony, lewej strony i prawej strony. Jeśli nie znasz różnicy między właściwością marginesu a właściwością wyściółki CSS w HTML, ten artykuł będzie bardzo pomoże w zdobyciu podstawowej wiedzy.

Przykład nr 01:

Zacznijmy od pierwszego przykładu użycia przykładów HTML do rozwinięcia różnicy między właściwością marginesu a właściwością wyściółki. Najpierw będziemy oglądać użycie nieruchomości marginesowej. Musimy więc utworzyć nowy plik HTML z rozszerzeniem „HTML”. Musimy go otworzyć w dowolnym narzędziu programowania, takiego jak Visual Studio Code. Rozpoczęliśmy kod HTML z znacznikiem „HTML”, który zostanie zakończony na ostatnim ze wszystkich tagów. Po rozpoczęciu znacznika HTML inicjowaliśmy znacznik głowy, aby umieścić w nim inne powiązane znaczniki.

Dodaliśmy w nim tag tytułowy, aby stworzyć nowy tytuł naszej strony internetowej HTML (i.mi., Margines.) Po znaczniku tytułu dodaliśmy znacznik „stylu” w znaczniku głównym tego pliku HTML, który został użyty do stylizowania strony internetowej HTML. Będziemy mieli przebranie w stylowatości po opracowaniu znacznika ciała. Używaliśmy znacznika „ciała” po zamknięciu tytułu głowy. Znacznik ciała zawiera 2 znaczniki nagłówka dla największego nagłówka „1st” (i.mi. H1.) Te nagłówki zawierają w nich różne tytuły, jak pokazano poniżej. Określiliśmy dwie różne klasy dla obu nagłówków osobno dla p1 i p2. Zajęcia P1 i P2 zostaną wykorzystane do stylizowania odpowiednio i 2. nagłówkach na różnych formatach stylizacji.

Znacznik ciała wraz z głównym znacznikiem HTML został tutaj zamknięty, jak widać na obrazie kodu Visual Studio. Użyliśmy tutaj klas P1 i P2, aby stylizować oba nagłówki osobno. Używamy właściwości granicznej, aby dodać 2 pikseli stałą niebieską obramowanie wokół obu nagłówków. Własność marginesu została tutaj użyta do dodania marginesów 100 pikseli do kierowania 1 ze wszystkich jego boków i do dodania marginesów 50 pikseli na kierunek 2 ze wszystkich stron. Kod dla strony HTML został zakończony, aby wyświetlić użycie właściwości marginesu. Zapiszmy go najpierw, a następnie uruchom w przeglądarce. Możesz wybrać dowolną wybraną przeglądarkę (i.mi., Chrome, Mozilla, Opera i itp.)

Po uruchomieniu tego pliku bezpośrednio w przeglądarce Google Chrome, mamy poniższy wynik. Wyświetlał dwa nachylenia rozmiaru „1” na ekranie strony internetowej o niebieskiej solidnej obramowaniu. Jak zastosowaliśmy właściwość marginesu na obu nagłówkach, dlatego pierwsza granica znajdowała. Drugi nagłówek to 50 pikseli z dala od lewej, prawej, dolnej i górnej (w stosunku do nagłówka 1). W ten sposób margines może stworzyć przestrzeń między granicą jednego elementu do drugiego.

Zaktualizujmy trochę tego samego kodu HTML, aby zapewnić różnorodny wygląd strony HTML. Używaliśmy tego samego pliku z tytułem „Margines”, jak pokazano poniżej. Tag stylu został rozpoczęty po zakończeniu tagu tytułowego. Wykorzystaliśmy klasę P1 do kierowania 1 i P2 do nagłówka 2. W obrębie Padmargin.Plik HTML, w ich stylizacji używamy obu klas P1 i P2. Przypisaliśmy tę samą wartość stałej niebieskiej granicy na nagłówki, jak na powyższej ilustracji. Następnie określiliśmy najwyższą właściwość marginesu i dolnego marginesu dla pierwszego nagłówka o rozmiar 1 i nadaliśmy obu właściwości wartość 50 pikseli. Następnie określamy lewy margines i prawy margines 30 pikseli do nagłówka 2 o wielkości „1”. Oznacza to, że po lewej i prawej stronie będzie mniej miejsca w porównaniu z górnymi i dolnymi marginesami. Zapiszmy ten kod do uruchomienia.

Po wykonaniu pliku HTML w Visual Studio i otwarciu go w przeglądarce Chrome, wynik został wyświetlony. Pierwszy nagłówek zawiera 50-pikselowy margines z górnej i dolnej, podczas gdy drugi nagłówek zawiera lewy i prawy margines 30 procent w stosunku do tej strony i powyższe nagłówek. W ten sposób można zastosować margines do różnych tagów.

Przykład nr 02:

Będziemy patrzeć na wyściółkę w porównaniu z marginesami. Używamy dwóch nagłówków rozmiaru 1 w znaczniku ciała tego pliku, zaczynając od ich określonych nazw klas, P1 i P2. Przed użyciem znacznika ciała będziemy używać znacznika głowy w tym pliku HTML. Ten tag zawiera tag tytułowy i znacznik stylu. Tag tytułowy został podany w celu wymienienia strony HTML jako margines. Tag stylu służy do nakładania CSS do elementów HTML. Zastosowaliśmy 2-pikselową niebieską granicę do obu nagłówków w etykiecie ciała. Ponadto zastosowaliśmy 10 -procentowy margines do wszystkich boków nagłówka o klasie P1, a 10 procent wyściółki do drugiego nagłówka zawierającego klasę P2. Zrobiliśmy to do tej pory, aby sprawdzić różnicę między aktualizacjami marginesu i wyściółki na nagłówkach osobno w tym samym pliku.

Po zapisaniu tego kodu HTML, uruchamiamy go w kodzie Visual Studio. Ten plik zostanie wykonany w przeglądarce Google Chrome. Aby zobaczyć wynik, mamy poniżej. Różnica między właściwością marginesu a właściwością wyściółki CSS była jasna. Pierwszy nagłówek zawiera 10 -procentowy margines jego granicy do reszty jej strony. Podczas gdy wyściółka otrzymuje 10 procent przestrzeni między nagłówkiem a jego granicą.

Wniosek:

Wyjaśniliśmy różnicę między właściwościami marginesu i wyściółki stylistyki CSS w HTML. Pokazuje, że wyściółka jest między granicą a elementem, podczas gdy margines jest między granicą a resztą strony. Pierwszym przykładem było bardzo wyraźnie pokazanie marginesów, podczas gdy ostatni przykład pokazał różnicę w wyściółce dotyczącej marginesów.