Właściwość padding CSS: jak tworzyć pola
CSS oferuje twórcom stron internetowych ogromne możliwości projektowania stron HTML. Mogą wydawać się trudne dla początkujących, ale jeśli gruntownie i metodycznie sobie z nimi poradzisz, technologia arkuszy stylów zostanie przyciszona, a układ witryn nie będzie już trudny. Jedną z nieodzownych właściwości CSS jest wypełnianie . Służy do ustawiania pól dla bloków stron HTML.
Czym są bloki?
Witryna jest zbudowana z cegieł - bloków. Ponadto każdy element, niezależnie od jego zawartości, musi mieć kształt prostokątny. Oznacza to, że wszystkie obrazy i napisy są mentalnie zawarte przez programistę w "pudełkach", po których tworzy stronę internetową.
Najczęściej bloki są ustawiane za pomocą znaczników.
,
- , . Właściwości CSS są stosowane do każdego takiego elementu: padding , margines , border , width i inne. Szerokość prostokąta bloku jest określona przez właściwość width , a następnie każdy element składa się z pól, które są konturowane za pomocą atrybutu border. Wreszcie składnik strony może mieć marginesy zewnętrzne lub wcięcia, margines , oddzielając go od innego bloku. Składnia właściwości wypełniania CSS
Twórcy kaskadowych arkuszy stylów udostępnili kilka opcji pisania atrybutów do 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 z opcji i daje im krótkie wyjaśnienie.
Przykład użycia
Wyjaśnienie
dopełnienie: 15 px;
Jeśli po atrybucie występuje jedna liczba, oznacza to, że element będzie zawierał te same pola ze wszystkich stron. Wpis w px przyjmuje, że wartość jest w pikselach. Oznacza to, że w efekcie blok będzie miał margines 15 pikseli.
wypełnienie: 18 px 36 px;
Pierwsza z dwóch liczb oznacza, że pola pionowe będą miały 18 pikseli, a pola boczne dwa razy większe - 36 pikseli.
wypełnienie: 6 px 12 px 18 px;
Średnia jest wartością pól po bokach (lewo i prawo), pozostałe dwa to pola pionowe. Pierwsza liczba (6 pikseli) odnosi się do górnego pola, a ostatnia (18 pikseli) odnosi się do dolnej.
wypełnienie: 6 px 12 px 18 px 36 px;
Forma właściwości wypełniania CSS, w której występują cztery liczby, umożliwia określenie pól po wszystkich stronach bloku. Wartości liczbowe są konsekwentnie stosowane do górnego pola i dalej zgodnie z ruchem wskazówek zegara w prawo, dół i lewo.
padding-left: 14 px;
Lewy dodatek mówi sam za siebie - pole zostanie ustawione tylko po lewej stronie elementu.
padding-right: 14 px;
Podobnie jak w przypadku poprzedniej opcji zapisu - pole zostanie utworzone tylko po prawej stronie bloku.
podszewka-góra: 14 px;
Wpis identyfikuje pole u góry.
padding-bottom: 14 px;
Wpis identyfikuje pole poniżej.
Należy zauważyć, że domyślne wypełnienie CSS wynosi zero. Ten atrybut nie jest dziedziczny, to znaczy musi być ustawiony dla każdego bloku. Oprócz zwykłych i zrozumiałych pikseli, szerokość pustej przestrzeni wokół bloków jest podana w jednostkach względnych. Na przykład w powyższych przykładach można zarejestrować 5% - w rezultacie szerokość pola jest automatycznie obliczana przez przeglądarkę.
Jak korzystać z nieruchomości?
Tak więc sprawdzane są formularze rekordów atrybutów, ale jak z nich korzystać na stronie HTML? Pierwsza opcja jest bardziej "piękna", gdy wszystko związane z technologią CSS nie jest napisane w HTML, ale renderowane w osobnym pliku z odpowiednim rozszerzeniem.
Drugą opcją jest napisanie bezpośrednio do znacznika < style >. W tym przypadku dopełnienie CSS jest zdefiniowane następująco:
< div style = " padding: 22 px">
Jak napisać atrybut - wybierz ekspres do góry. W każdym przypadku konieczne jest posiadanie wszystkich sposobów korzystania z nieruchomości w celu określenia pól w celu korzystania z niej przy okazji.
Składnia właściwości wypełniania CSS
Twórcy kaskadowych arkuszy stylów udostępnili kilka opcji pisania atrybutów do 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 z opcji i daje im krótkie wyjaśnienie.
Przykład użycia | Wyjaśnienie |
dopełnienie: 15 px; | Jeśli po atrybucie występuje jedna liczba, oznacza to, że element będzie zawierał te same pola ze wszystkich stron. Wpis w px przyjmuje, że wartość jest w pikselach. Oznacza to, że w efekcie blok będzie miał margines 15 pikseli. |
wypełnienie: 18 px 36 px; | Pierwsza z dwóch liczb oznacza, że pola pionowe będą miały 18 pikseli, a pola boczne dwa razy większe - 36 pikseli. |
wypełnienie: 6 px 12 px 18 px; | Średnia jest wartością pól po bokach (lewo i prawo), pozostałe dwa to pola pionowe. Pierwsza liczba (6 pikseli) odnosi się do górnego pola, a ostatnia (18 pikseli) odnosi się do dolnej. |
wypełnienie: 6 px 12 px 18 px 36 px; | Forma właściwości wypełniania CSS, w której występują cztery liczby, umożliwia określenie pól po wszystkich stronach bloku. Wartości liczbowe są konsekwentnie stosowane do górnego pola i dalej zgodnie z ruchem wskazówek zegara w prawo, dół i lewo. |
padding-left: 14 px; | Lewy dodatek mówi sam za siebie - pole zostanie ustawione tylko po lewej stronie elementu. |
padding-right: 14 px; | Podobnie jak w przypadku poprzedniej opcji zapisu - pole zostanie utworzone tylko po prawej stronie bloku. |
podszewka-góra: 14 px; | Wpis identyfikuje pole u góry. |
padding-bottom: 14 px; | Wpis identyfikuje pole poniżej. |
Należy zauważyć, że domyślne wypełnienie CSS wynosi zero. Ten atrybut nie jest dziedziczny, to znaczy musi być ustawiony dla każdego bloku. Oprócz zwykłych i zrozumiałych pikseli, szerokość pustej przestrzeni wokół bloków jest podana w jednostkach względnych. Na przykład w powyższych przykładach można zarejestrować 5% - w rezultacie szerokość pola jest automatycznie obliczana przez przeglądarkę.
Jak korzystać z nieruchomości?
Tak więc sprawdzane są formularze rekordów atrybutów, ale jak z nich korzystać na stronie HTML? Pierwsza opcja jest bardziej "piękna", gdy wszystko związane z technologią CSS nie jest napisane w HTML, ale renderowane w osobnym pliku z odpowiednim rozszerzeniem.
Drugą opcją jest napisanie bezpośrednio do znacznika < style >. W tym przypadku dopełnienie CSS jest zdefiniowane następująco:
< div style = " padding: 22 px">
Jak napisać atrybut - wybierz ekspres do góry. W każdym przypadku konieczne jest posiadanie wszystkich sposobów korzystania z nieruchomości w celu określenia pól w celu korzystania z niej przy okazji.