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
[edytuj]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
[edytuj]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.