Dopełnienie CSS jest jedną z właściwości Model pudełkowy CSS. Ta skrócona właściwość ustawia dopełnienie wokół wszystkich czterech boków elementu HTML. Dopełnienie CSS można zastosować do prawie każdego Znacznik HTML (z wyjątkiem niektórych tagów tabeli). Dodatkowo wszystkie cztery boki elementu mogą mieć różną wartość.
Właściwość dopełniania CSS
Aby użyć skróconej właściwości dopełniania CSS, możesz użyć mnemonika „TRouBLe” (lub „TRiBbLe” dla fanów Star Trek). To oznacza Top, dobrze, Dolny, i lewoi odwołuje się do kolejności szerokości dopełnienia ustawionych we właściwości skróconej. Na przykład:
wypełnienie: górny prawy dolny lewy;
padding: 1px 2px 3px 6px;
Jeśli użyjesz wartości wymienionych powyżej, zastosuje inną wartość dopełnienia do każdej strony dowolnego elementu HTML, do którego ją stosujesz. Jeśli chcesz zastosować tę samą wyściółkę na wszystkich czterech bokach, możesz uprościć swój CSS i po prostu wpisz jedną wartość:
wypełnienie: 12px;
W przypadku tej linii CSS, 12 pikseli wypełnienia miałoby zastosowanie do wszystkich 4 stron elementu.
Jeśli chcesz, aby dopełnienie było takie samo dla góry i dołu oraz z lewej i prawej strony, możesz wpisać dwie wartości:
wypełnienie: 24px 48px;
Pierwsza wartość (24px) miałaby zastosowanie do góry i dołu, a druga do lewej i prawej strony.
Jeśli wpiszesz trzy wartości, spowoduje to, że dopełnienie poziome (lewe i prawe) będzie takie samo, przy zmianie góry i dołu:
wypełnienie: górny prawy i lewy dół;
dopełnienie: 0px 1px 3px;
Zgodnie z modelem CSS box, dopełnienie jest najbliżej samego elementu/treści. Oznacza to, że dopełnienie jest dodawane do elementu pomiędzy szerokością lub wysokością zawartości a dowolnymi wartościami obramowania, których używasz. Jeśli dopełnienie jest ustawione na zero, to ma tę samą krawędź co zawartość.
Wartości dopełnienia CSS
Dopełnienie CSS może przyjmować dowolną nieujemną wartość długości. Pamiętaj, aby określić miarę, taką jak px lub em. Możesz również określić procent dopełnienia, który będzie procentem szerokości bloku zawierającego element. Obejmuje to wyściółkę górną i dolną. Na przykład:
#kontener { szerokość: 800px; wysokość: 200px; }
#kontener p { szerokość: 400px; wzrost: 75%; wypełnienie: 25% 0; }
wysokość akapitu wewnątrz #pojemnik element będzie stanowić 75% #pojemnikwysokość plus 25% szerokości górnej wyściółki i 25% szerokości dolnej wyściółki. Daje to 300 + 200 + 200 = 700px.
Efekty dodania dopełnienia CSS CSS
Na elementy blokowe, wyściółka jest nakładana z czterech stron. Ponieważ element jest już blokiem lub pudełkiem, dopełnienie jest stosowane do boków pudła.
Po dodaniu dopełnienia CSS do elementy wbudowane, może wystąpić pewne nakładanie się elementów powyżej i poniżej elementu wbudowanego, jeśli dopełnienie pionowe przekracza wysokość linii, ale nie spowoduje to obniżenia wysokości linii. Poziome dopełnienie CSS zastosowane do elementów wbudowanych zostanie dodane na początku i na końcu elementu. A wyściółka może zawijać linie. Nie dotyczy to jednak wszystkich wierszy elementu wielowierszowego, więc nie można użyć dopełnienia do wcięcia segmentu wielowierszowej zawartości w wierszu.
Ponadto w CSS2.1 nie można tworzyć bloków kontenerów, w których szerokość zależy od elementu z procentami szerokości (lub szerokości dopełnienia). Jeśli to zrobisz, wynik jest nieokreślony. Przeglądarki nadal będą wyświetlać zawartość, ale możesz nie uzyskać oczekiwanych wyników. Jeśli się nad tym zastanowisz, ma to sens, tak jakby element kontenera musiał znać szerokość swoich elementów podrzędnych, aby zdefiniować swoją szerokość — na przykład gdy nie ma wstępnie zdefiniowanej szerokości, a jeden lub więcej ma szerokość ustawioną jako procent elementu kontenera, tworzy to łańcuch kołowy bez odpowiedź. Jeśli używasz wartości procentowych dla szerokości czegokolwiek w swoim dokumencie, powinieneś upewnić się, że szerokości elementów nadrzędnych są również zdefiniowane.