Krótki przegląd dopełniania CSS

Lightcome / Getty Images

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ć mnemonicznego TRouBLe (lub TRiBbLe dla fanów Star Trek). To oznacza Top , prawo , na dole , oraz lewy i odwołuje się do kolejności szerokości dopełnienia ustawionych we właściwości skróconej. Na przykład:

|_+_|

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ść:

|_+_|

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 lewej i prawej strony, możesz wpisać dwie wartości:

|_+_|

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:

|_+_|

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 także 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:

|_+_|

The wzrost akapitu wewnątrz #pojemnik element będzie stanowić 75% #pojemnik wysokość 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

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ść ustawiona jako procent elementu kontenera, to tworzy okrągły łańcuch bez odpowiedzi. 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.