Właściwość padding CSS: jak tworzyć pola

CSS oferuje twórcom stron internetowych ogromne możliwości projektowania stron HTML. Początkujący wydają się skomplikowani, ale jeśli ostrożnie i metodycznie sobie z nimi poradzicie, technologia arkuszy stylów się rozpadnie, układ stron przestanie przysparzać trudności. Jedna z nieodzownych właściwości wypełnienia CSS- . Służy do określania pól bloków stron HTML.

Jakie są bloki?

Strona jest zbudowana z bloków bloków. Jednocześnie każdy element, niezależnie od jego treści, powinien mieć kształt prostokąta. Oznacza to, że wszystkie obrazy i napisy składają się z programisty w pudełku, z którego tworzy stronę internetową.


Często bloki są oznaczone,

-

. Każdy taki element wykorzystuje właściwości CSS: dopełnienie, margines, obramowanie, szerokość i inne. Szerokość bloku prostokąta jest podana przez właściwość width, a następnie każdy element jest tworzony przez pola, które są przedstawione za pomocą atrybutu border. Wreszcie składnik strony może mieć zewnętrzne pola lub wcięcia - margines oddzielający go od innego bloku.

Właściwości wypełniania CSS Składnia

Twórcy kaskadowych arkuszy stylów dostarczyli kilka opcji pisania atrybutów dla ustawiania pól. Możesz zrobić pusty obszar wewnątrz bloku na osiem różnych sposobów! Poniższa tabela pokazuje przykłady dla każdej opcji i podaje im krótkie wyjaśnienie.




Przykład użycia



Wyjaśnienie



wypełnienie: 15 px;



Jeżeli po tym atrybucie powinno nastąpićjeden numer, oznacza to, że element będzie miał te same pola ze wszystkich stron. Rekord px przyjmuje, że wartość jest ustawiona w pikselach. Oznacza to, że na końcu blok będzie miał 15 pikseli.



wypełnienie: 18 px 36 px;



Pierwsza z dwóch liczb wskazuje, że pionowe pola będą miały 18 pikseli, a boki będą dwa razy większe niż 36 pikseli.



wypełnienie: 6 px 12 px 18 px;



Średnia liczba to wartość pól po bokach (lewej i prawej), a dwie pozostałe to pola pionowe. W tym przypadku pierwsza liczba (6 pikseli) odnosi się do górnego pola, a ostatnia (18 pikseli) - do dolnej.



dopełnienie: 6 px 12 px 18 px 36 px;



Właściwość wypełniania CSS, w której obecne są cztery liczby, umożliwia określenie pól po wszystkich stronach bloku. Wartości liczbowe są stosowane sekwencyjnie do górnego pola, a następnie zgodnie z ruchem wskazówek zegara - z prawej, z dołu i z lewej strony.



wypełnienie lewe: 14 px;



Oświadczenie pozostawione, by mówić samo za siebie - pole zostanie ustawione tylko na lewo od elementu.



padding-right: 14 px;



Podobnie jak w poprzednim rekordzie, pole zostanie utworzone tylko po prawej stronie bloku.



wyściółka: 14 px;



Rekord określa pole z góry.



padding-bottom: 14 px;



Rekord określa pole poniżej.

Należy zauważyć, że domyślnie wypełnienie CSS wynosi zero. Ten atrybut nie jest dziedziczony, to znaczy musi być zainstalowany dla każdego bloku. Oprócz zwykłych i wyraźnych pikseli, szerokość pustej przestrzeni wokół bloków jest podana w jednostkach względnych. Na przykład powyższe przykłady mogą byćzapisz 5% - w rezultacie szerokość pola jest automatycznie zliczana przez przeglądarkę.

Jak korzystać z nieruchomości?

Tak więc, rozważane są formularze zapisu atrybutów, ale jak z nich korzystać na stronie HTML? Pierwsza opcja jest "piękna", gdy wszystko związane z technologią CSS nie jest napisane w HTML, ale jest umieszczane w oddzielnym pliku z odpowiednim rozszerzeniem.
Drugą opcją jest napisanie bezpośrednio do tagu. W tym przypadku dopełnienie CSS jest podane w następujący sposób: Jak napisać atrybut - wybiera instalator. W każdym przypadku musisz mieć wszystkie sposoby, aby użyć właściwości do określenia pól, tak aby podczas korzystania z nich.

Powiązane publikacje