HTML5 – dopełnienie

ten wyściółka w HTML pozwala nam na wygenerowanie przestrzeni pomiędzy treścią a krawędziami pudełka, które je zawiera, dzięki czemu możemy nadać elementowi powietrza i uzyskać ciekawe efekty graficzne.

• Górna wyściółka: Inicjuje wyściółkę górnej krawędzi, jej wymiary są wyrażone w długości lub w procentach.
• Wypełnienie-prawo: Inicjuje wyściółkę prawej krawędzi, jej wymiary są wyrażone w długości lub w procentach.
• Wypełnienie spodu: Inicjuje wyściółkę dolnej krawędzi, jej wymiary są wyrażone w długości lub w procentach.
• Wypełnienie lewe: Inicjuje dopełnienie lewej krawędzi, jego wymiary są wyrażone w długości lub w procentach.
• Wyściółka: Ten skrót pomaga nam wykonać inicjalizację dopełnienia ze wszystkimi jego granicami w jednej linii.

Coś ważnego, co musimy ograniczyć podczas inicjalizacji a wyściółka Korzystanie z pomiarów procentowych polega na tym, że ten procent będzie brany tylko na podstawie szerokości elementu, nigdy na wysokości.
Zobaczmy teraz z prostym kodem, jak zastosować a wyściółka w naszym dokumencie HTML5.

 Przykład
Istnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.

Jak widać z tego kodu możemy wyróżnić całkiem ciekawe rzeczy, jeśli przyjrzymy się uważnie, zastosowaliśmy już inne style do elementu, do którego dopełniamy i to znaczy, że możemy mieszać z innymi elementami, aby uzyskać nasz wynik, możemy zobacz też, że używamy jednostki miary em zamiast pxChociaż oba są kompatybilne, pytaniem jest, że widzimy ich wszechstronność; na koniec zobaczmy, jak to wygląda w naszej przeglądarce:

Zobaczmy teraz, jak zastosować skrót, aby zainicjować nasz wyściółka w jednej linii, w tym celu kolejność pomiarów wypełnienia jest następująca: Góra, Prawo, Dół, Lewo; Oprócz tego, gdy pomijamy wartości, druga wartość jest dostosowywana do nie pominiętej, np. jeśli pominiemy lewą, przyjmie wartość prawej, jeśli pominiemy dolną, przyjmie wartość górnej, jeśli umieścimy tylko jedną wartość, cztery boki przyjmą tę samą wartość.
Zademonstrujemy całą tę teorię za pomocą kodeksu praktyki, zobaczmy, jak w bardzo prosty sposób zaimplementujemy dopełnienie w jednej linii.

 Przykład
Istnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.

Jak widać deklaracja padding niewiele się zmienia i oszczędzamy kilka linijek, spójrzmy jak by to wyglądało w przeglądarce:

W tym elemencie tworzymy go z dość nieregularną ramką, gdybyśmy nie zastosowali dopełnienia, ramka przechwyciłaby tekst, dokonaj zmiany i sprawdź w swoich przeglądarkach, aby zobaczyć różnicę.
Na tym kończymy nasz samouczek dopełniania HTML5, możemy teraz tworzyć spacje w elementach, które zawierają naszą zawartość w dokumencie HTML, a pozostało nam ćwiczyć, dopóki nie opanujemy tego, czego nauczyliśmy się w tym samouczku.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt