CSS wyściółka jest jedną z właściwości modelu pudełkowego 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 znacznika HTML (z wyjątkiem niektórych znaczników tabel). Dodatkowo wszystkie cztery boki elementu mogą mieć inną wartość.
Właściwość wypełniania CSS
Aby użyć skróconej właściwości wypełnienia CSS, możesz użyć mnemonicznego "TRouBLe" (lub "TRiBbLe" dla fanów Star Trek). To oznacza Top, dobrze, Dolny, i lewoi odnosi się do kolejności szerokości dopełnienia ustawionych w skróconej właściwości. Na przykład:
wypełnienie: u góry po prawej u dołu po lewej; wypełnienie: 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 go zastosujesz. Jeśli chcesz zastosować to samo wypełnienie do wszystkich czterech stron, możesz uprościć swój CSS i napisać tylko jedną wartość:
dopełnienie: 12 pikseli;
Przy tej linii CSS 12 pikseli paddingu miałoby zastosowanie do wszystkich 4 boków elementu.
Jeśli chcesz, aby dopełnienie było takie samo dla górnego i dolnego oraz lewego i prawego, możesz wpisać dwie wartości:
wypełnienie: 24px 48px;
Pierwsza wartość (24 piksele) dotyczyłaby góry i dołu, a druga dotyczyłaby lewej i prawej strony.
Jeśli napiszesz trzy wartości, spowoduje to, że wyściółka pozioma (lewa i prawa) będzie taka sama, zmieniając górny i dolny:
wypełnienie: górne prawe i lewe dno; wypełnienie: 0px 1px 3px;
Zgodnie z modelem pudełkowym CSS wypełnienie jest najbliższe elementowi / treści. Oznacza to, że dopełnienie jest dodawane do elementu między szerokością lub wysokością treści a dowolnymi wartościami granicznymi, których używasz. Jeśli dopełnienie jest ustawione na zero, to ma tę samą krawędź co zawartość.
Wartości wypełniania CSS
Wypełnienie CSS może przyjmować dowolną nieujemną wartość długości. Pamiętaj, aby określić pomiar, taki jak px lub em. Możesz także określić procent wypełnienia, który będzie procentem szerokości bloku zawierającego element. Obejmuje to dopełnienie górną i dolną. Na przykład:
#container {width: 800px; wysokość: 200 pikseli; } #container p {width: 400px; wzrost: 75%; wypełnienie: 25% 0; }
Wysokość akapitu wewnątrz #pojemnik element będzie wynosił 75% wartości #pojemnikWysokość plus 25% szerokości dla górnej wyściółki i 25% szerokości dla dolnej wyściółki. To suma 300 + 200 + 200 = 700px.
Efekty dodawania wypełniania CSS
W elementach blokowych wyściółka jest nakładana na cztery strony. Ponieważ element jest już blokiem lub ramką, dopełnienie jest stosowane do boków pudełka.
Gdy dopełnienie CSS zostanie dodane do elementów śródliniowych, może wystąpić pewne nakładanie się elementów powyżej i poniżej elementu śródliniowego, jeśli wypełnienie pionowe przekracza wysokość linii, ale nie spowoduje to obniżenia wysokości linii. Poziome wypełnienie CSS zastosowane do elementów śródliniowych zostanie dodane na początku elementu i na końcu elementu. A dopełnienie może owijać linie. Ale nie będzie to miało zastosowania do wszystkich linii elementu wielowierszowego, więc nie można użyć wypełnienia do wcięcia segmentu wielowierszowej zawartości śródliniowej.
Ponadto w CSS2.1 nie można tworzyć bloków kontenerów, w których szerokość zależy od elementu z wartościami procentowymi szerokości (lub szerokości wypełnienia). Jeśli zrobisz to wynik jest niezdefiniowany. Przeglądarki nadal wyświetlają zawartość, ale możesz nie uzyskać oczekiwanych rezultatów. Jeśli o tym pomyślisz, ma to sens, jakby twój element kontenerowy musiał znać szerokość jego elementów potomnych w celu zdefiniowania jego szerokości - na przykład wtedy, gdy nie ma zdefiniowanej szerokości, a jeden lub więcej z nich ma szerokość ustawiona jako procent elementu kontenera, ustawia łańcuch kołowy bez odpowiedzi. Jeśli używasz wartości procentowych dla szerokości dowolnego elementu dokumentu, upewnij się, że zdefiniowano również szerokości elementów rodzica.
