Dopełnienie CSS umożliwia koderowi HTML ustawienie domyślnego dopełnienia lub martwej przestrzeni poza elementem HTML. Zaletą tego jest to, że oszczędza koderowi powtarzanie tego kodu dopełniającego dla każdego wystąpienia tego elementu i łatwiej tworzy spójność na stronie. Element HTML, który ma być dopełniony, może być dowolną liczbą elementów, na przykład akapitem, tabelą lub nagłówkiem.
Aby utworzyć dopełnienie w CSS, musisz najpierw zidentyfikować element HTML, który chcesz uzupełnić. Ten element, który chcesz uzupełnić, nazywany jest selektorem. Następnie będziesz chciał określić odpowiednie wartości dopełnienia. W CSS istnieje pięć różnych typów właściwości dopełniania — jedna dla wszystkich czterech boków elementu naraz i cztery inne dla każdej indywidualnej strony elementu (np. lewa strona, prawa strona, górna strona lub dolna strona ). Właściwość, która pozwala programiście określić wartości dla wszystkich czterech stron elementu HTML jednocześnie, nazywana jest własnością skróconą.
Językiem kodowania używanym do określenia jednej deklaracji dopełnienia CSS jest po prostu słowo „dopełnienie”. Za tą etykietą znajdują się odpowiednie „wartości” dopełnienia lub informacje o pożądanej ilości miejsca, zwykle reprezentowane w pikselach lub w procentach. Dopełnienie i wartości są zapisywane w nawiasach klamrowych lub nawiasach klamrowych (np. „{” i „}”). Wszystko to poprzedza element HTML, który ma zostać uzupełniony (np. „p” dla akapitu lub „H2” dla nagłówków drugiego poziomu).
Jeśli chodzi o sposób przedstawiania wartości, wartości mogą być reprezentowane w pikselach (np. 1px lub 5px), punktach (np. 1pt lub 5pt) lub calach (np. 1in lub 5in) lub centymetrach (np. 1cm lub 5cm) . Wartości można również zadeklarować jako procent stylizowanego elementu HTML. Jeśli wartość wynosi na przykład 50%, dopełnienie będzie równe połowie rozmiaru elementu.
Poniższe przykłady to kod HTML służący do dopełniania elementu HTML za pomocą wartości odzwierciedlonych odpowiednio w procentach i długości. Jeśli przypisana jest tylko jedna wartość, przeglądarki internetowe przypiszą to uzupełnienie do wszystkich czterech stron elementu HTML.
wypełnienie:10%;
padding: 100px;
Dodanie większej liczby wartości do powyższego typu deklaracji dopełnienia spowoduje, że przeglądarki internetowe zinterpretują je w określony sposób. Jeśli przypisano dwie wartości, pierwsza będzie odpowiadać górze i dole, a druga lewej i prawej. Trzy wartości spowodują, że pierwsza będzie odnosić się do góry, druga do lewej i prawej strony, a trzecia do dołu elementu HTML. Przypisanie maksymalnie czterech wartości powoduje, że pierwsza, druga, trzecia i czwarta wartość odpowiadają górnej, prawej, dolnej i lewej stronie elementu HTML, w tej kolejności. W przypadku podania więcej niż jednej wartości należy je oddzielić spacjami i zakończyć średnikiem, na przykład:
Wypełnienie: 10px 20PX 10PX 20PX;
Dopełnienie w CSS może być również wykonywane z jednej strony na raz. W związku z tym dostępne są jeszcze cztery właściwości dopełnienia. Są to padding-top, padding-right, padding-bottom i padding-left. Aby stworzyć dopełnienie w CSS w bardziej precyzyjny sposób, musisz oznaczyć właściwości tą samą składnią, co skrócone deklaracje opisane powyżej. Każda z tych właściwości dopełniania przyjmuje tylko jedną wartość w postaci długości lub wartości procentowej. Na przykład:
padding-top: 10px;
dopełnienie-prawo:20px;
padding-bottom: 10px;
padding-left: 20px;
Poniższy kod tworzy stronę internetową, deklaruje właściwości dopełniania między znacznikami stylu, a następnie używa ich w elemencie akapitu określonym przez znacznik p. Tekst między /* i */ to uwagi wyjaśniające rodzaj zastosowanego dopełnienia i nie zostaną uwzględnione w kodzie dopełniania CSS.
Ten tekst ma takie samo wypełnienie z każdej strony. Wypełnienie z każdej strony ma 10px.
Ten tekst ma górne i dolne dopełnienie o wielkości 50 pikseli oraz lewe i prawe dopełnienie o wielkości 30 pikseli.
Ten tekst ma górne dopełnienie 10px, prawe dopełnienie 20px, dolne dopełnienie 10px i lewe dopełnienie 20px.
W powyższym przykładzie „przykład1” itd. to nazwy przypisane do klasy, do których następnie odwołuje się paragrafy. Kropka między znacznikiem p a nazwami klas na początku kodu oznacza deklarację klasy przypisanej do akapitu. Zwróć uwagę na nawiasy klamrowe po deklaracji klasy zawierającej przypisania wartości właściwości dopełniania.
Choć może się to wydawać bardzo pracochłonne, jest znacznie mniej pracochłonne niż określanie dopełnienia dla każdego akapitu. Możesz zadeklarować jedną właściwość dopełniania dla żądanego elementu, który w powyższym przykładzie jest znacznikiem p, a następnie odwołać się do klasy, gdy użyjesz elementu między znacznikami treści strony. Jeśli dla wszystkich akapitów potrzebny jest tylko jeden rodzaj dopełnienia, nie musisz w ogóle używać klas. Po prostu użyj następującego kodu między tagami stylu, a następnie zakoduj akapity bez określania żadnej klasy. Ten kod znalazłby się między tagami body zamiast kodu w powyższym przykładzie.
p {dopełnienie:10px 20px 10px 20px;}
To dopełnienie CSS wpłynęłoby na wszystkie akapity, nawet jeśli nie określono klasy.