Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Marginesy i odstępy

Odstęp cząstkowy

Email Drukuj PDF

Tematy: model pojemnika | margines cząstkowy | margines mieszany | odstęp cząstkowy | odstęp mieszany

Dane w pigułce
Zastosowanie określa szerokość poszczególnych odstępów między elementem a jego obramowaniem
Dziedziczenie nie
Wartości wielkość w jednostkach lub procentach, auto
Wartość domyślna 0
Przykład padding-left: 20px;
Uwagi
Odpowiednik w HTML brak

Aby zdefiniować odstęp cząstkowy, należy wpisać w definicji stylu padding-left : wartości (lub padding-top, padding-right, padding-bottom).

Zawartość elementu można oddzielać od jego obramowania, definiując dodatkowy wewnętrzny odstęp, poszerzający "naturalny" odstęp.

<p style="padding-top: 1cm">Treść akapitu.</p>

Akapit o wewnętrznym odstępie górnym powiększonym o 1cm

<td style="padding-top: 5mm">Akapit oddzielony od górnego brzegu komórki tabeli 5-milimetrowym odstępem.</td>

Akapit oddzielony od górnego brzegu komórki tabeli 5-milimetrowym odstępem.


W analogiczny sposób tworzymy dolny odstęp.

<p style="padding-bottom: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstępem.</p>

Akapit oddzielony od dolnego brzegu obramowania 1-centymetrowym odstępem.

Tworzenie lewego odstępu

<p style="padding-left: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstępem z lewej strony.</p>

Akapit oddzielony od lewego obramowania odstępem 5em.

Tworzenie prawego odstępu

<p style="padding-right: 5cm">Akapit oddzielony od prawego obramowania 1-centymetrowym odstępem z prawej strony.</p>

Akapit oddzielony od prawego obramowania 5-centymetrowym odstępem. Akapit oddzielony od prawego obramowania 5-centymetrowym odstępem.


Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V