CSS/Odstęp wewnętrzny

Odstęp wewnętrzny (padding) w modelu prostokątnym CSS to obszar zawarty pomiędzy obramowaniem a zawartością elementu.

Odstęp wewnętrzny możemy edytować zbiorczo za pomocą reguły padding lub oddzielnie poprzez padding-top, padding-right, padding-bottom, padding-left. Pod tym względem edycja jest analogiczna jak w przypadku reguły margin.

padding

Ogólnie zapis tej reguły wygląda następująco:

padding: <procent> | <długość> | inherit ;

co oznacza, że wartości mogą być podane w konkretnych jednostkach (np. em, cm), procentowo lub mogą dziedziczyć wartość po elemencie nadrzędnym.

Ten skrótowy zapis występuje w trzech wariantach, oto ich przykłady:

• padding: 3em ;

Ustawia wszystkie odstępy wewnętrzne na wartość równą 3em.

• padding: 40px 12px ;

Pierwsza z dwóch podanych wartości (40px) oznacza odstęp górny i dolny (padding-top i padding-bottom), a druga (12px) odstępy z lewej i prawej strony (padding-left i padding-right).

• padding: 1cm 4cm 2cm 1cm ;

Powyższy zapis ustala po kolei odstępy wewnętrzne z każdej strony. Kolejne wartości są interpretowane zgodnie z ruchem wskazówek zegara, co oznacza, że pierwsza wartość (1cm) odnosi się do padding-top, druga (4cm) do padding-right, kolejna (2cm) do padding-bottom i ostatnia (1cm) do padding-left.

padding-top, padding-right, padding-bottom, padding-left

Reguły te mogą przyjmować wartości dokładnie tego samego typu co padding. Odnoszą się kolejno do odstępu nad, z prawej strony, pod i z lewej strony elementu. Przykładowo, zapis

padding-right: 10% ;

oznacza ustalenie wielkości prawego marginesu elementu na 10% całej szerokości obszaru zawartego pomiędzy lewym i prawym obramowaniem.