Padding in CSS: Jak skonfigurować i odtwarzać funkcje

Zgodnie z modelem blokowym wyświetlanie wypełnienia CSS lub pola jest odstępstwem od zewnętrznej granicy elementu do jego zawartości. CSS umożliwia zarządzanie rozmiarem obicia dla każdej strony bloku pojedynczo lub dla wszystkich stron naraz. Aby uzyskać prawidłowe wyświetlanie elementu, ważne jest zrozumienie cech obliczania wewnętrznych wcięć.

grupa właściwości padding

Istnieje cała grupa właściwości opisujących dopełnienie w CSS. Jest to:
  • padding-top - kontroluje wartość górnego pola;
  • padding-right - zmienia wcięcie;
  • padding-bottom - kontroluje rozmiar dolnej poduszki;
  • padding-left - ustawia szerokość wcięcia w lewo.
  • Ogólna właściwość dopełnienia w CSS pozwala zdefiniować wszystkie cztery pola w jednej regule. Instrukcja może przyjmować od jednego do czterech argumentów:


  • 4 parametry. Podkładki są konwertowane zgodnie z ruchem wskazówek zegara, zaczynając od góry. Nagrywanie jest stosowane, jeśli każda strona ma swój własny rozmiar wcięcia.


  • //wypełnienie: wypełnienie górne-prawe wypełnienie-dolne wypełnienie-lewe
    .element {
    wypełnienie: 10px 20px 30px 40px;
    }
    • 3 parametry. Jeśli marginesy boczne są równe, można je zgrupować w jeden argument. Kolejność transferu: górne, lewe i prawe, dolne pole.
    //wypełnienie: wyściółka górna-prawa + wyściółka-lewa wyściółka-dół
    .element {
    wyściółka: 10px 20px 30px;
    }
    • 2 parametry. Częściowe grupowanie górnej z dolnym i lewym z prawymi polami.
    //wypełnienie: wypełnienie + dopełnienie-dolne wypełnienie-prawo + wypełnienie-lewe
    .element {
    wypełnienie: 10px 20px;
    }
    • 1 parametr. Ustawia rozmiarpo prostu dla wszystkich wyściółek.
    .element {
    wypełnienie: 10 pikseli;
    }

    Miejsce w strukturze bloku

    Wartość dopełnienia w CSS domyślnie jest zawarta w całkowitej wartości zajętego elementu przestrzeni.

    & lt; script async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
    & lt ;! - fb_336x280_2 - & gt;

    & lt; skrypt & gt; (adsbygoogle = window.adsbygoogle || []). push ({});
    .blok1 {
    szerokość: 100 pikseli;
    wysokość: 100 pikseli;
    padding-right: 30px;
    wierzch ochraniacza: 20 pikseli;
    }

    Dla elementu.block1rzeczywisty rozmiar będzie mieć 130px szerokości i 120px wysokości. Właściwościszerokośćiwysokośćdomyślnie określają rozmiar obszaru tematycznego, a dopełnienie w CSS jest mierzone osobno.

    Jednostki miary

    Można określić stopień wypełnienia w dowolnych odległościach używanych w CSS - pikselach, procenach, em lub rem.

    Ważne: jeśli wartość procentowa jest ustawiona na wcięcie, zawsze zostanie odjęta od szerokości elementu PARENT, nawet jeśli jest to górne lub dolne pole.

    .parent {
    szerokość: 200 pikseli;
    wysokość: 100 pikseli;
    }
    .block2 {
    wysokość: 30 pikseli;
    szerokość: 100 pikseli;
    padding-bottom: 10%;
    }

    W przypadku bloku , bloku 2 , dolny margines będzie wynosił 20 pikseli (10% z 200 pikseli), a rzeczywista wysokość to 50 pikseli.

    W przeciwieństwie do marginesu, dopełnienie w CSS nie może być mniejsze niż zero. Wysyłając wartość ujemną do instrukcji, po prostu zostanie zignorowana przez przeglądarkę.

    Elementy elementów linii

    Definiowanie wcięć wcięcia dla elementów z wyświetlaniem typu łańcucha ma swoje zawiłości.

    W przypadku bloków stanowiących część liniiwartość górnego i dolnego pola jest zawsze ignorowana, ponieważ mogą zakłócić konstrukcję.

    rozpiętość {
    padding-left: 30px;
    padding-right: 20px;
    wyściółka: 50 pikseli;
    padding-bottom: 40px;
    }
    Po lewej i prawej stronie elementówzakresupojawią się odpowiednie instrukcje wcięcia, ale nie będzie pionowego przesunięcia linii. W rzeczywistości przeglądarka ustawi wymagane pola w bloku, ale nie ma to znaczenia, ponieważ nie wpływają one na jego miejsce w całym wątku.
    Właściwość padding CSS jest dobrze obsługiwana przez wszystkie przeglądarki, w tym najstarsze, a także może być animowana za pomocą animacji i instrukcji przejścia.

    Powiązane publikacje