Inne działy

 

 

CSS wypełnienie (padding)

 

Właściwość padding pozwala określić, ile miejsca powinno pojawić się pomiędzy zawartością elementu i jego krawędzią:

Istnieje następujących pięć właściwości CSS, które mogą być używane do kontrolowania listy:

Wartość tego atrybutu powinna być liczbowa, procentowa, lub dziedziczona. Jeśli wartość jest dziedziczona element będzie miał takie same ustawienia jak jego element nadrzędny. Jeśli używana jest wartość procentowa, procent jest od elementu zawierającego.

Można również ustawić różne wartości dla dopełnienia, na każdej stronie z elementem następującymi właściwościami:

  • Właściwość padding-bottom  określa wypełnienie dolne elementu.
  • Właściwość padding-top  określa górne wypełnienie elementu.
  • Właściwość padding-left  określa lewe wypełnienie elementu.
  • Właściwość padding-right  określa prawe wypełnienie elementu.
  • Właściwość padding służy, jako skrót dla właściwości poprzednich.

Teraz zobaczymy jak stosować te właściwości za pomocą przykładów.

Właściwość padding-bottom:

Właściwość padding-bottom określa dolne dopełnienie (przestrzeń) elementu. Może przybierać wartości w zakresie wartości liczbowych lub procentowo %.

Oto przykład: 

<p style="padding-bottom: 15px; border:1px solid black;">
To jest akapit z określoną właściwością padding-bottom
</p>

<p style="padding-bottom: 5%; border:1px solid black;">
To jest kolejny akapit z określonym dolnym dopełnieniem w procentach
</p>

 Poniżej wynik działania kodu:

To jest akapit z określoną właściwością padding-bottom

To jest kolejny akapit z określonym dolnym dopełnieniem w procentach

 

Właściwość padding-top:

Właściwości padding-top ustawia dopełnienie górnej (przestrzeni) elementu. Może to być wartość liczbowa lub procentowa %.

Oto przykład:

<p style="padding-top: 15px; border:1px solid black;">
To jest akapit z określonym górnym dopełnieniem 
</p>

<p style="padding-top: 5%; border:1px solid black;">
To jest kolejny akapit z górnym określonym dopełnieniem w procentach 
</p>

 Poniżej wynik działania kodu:

To jest akapit z określonym górnym dopełnieniem

To jest kolejny akapit z górnym określonym dopełnieniem w procentach

 

Właściwość padding-left:

Właściwości padding-left ustawia dopełnienie z lewej strony (przestrzeni) elementu. Może to być wartość liczbowa lub procentowa %.

Oto przykład:

<p style="padding-left: 15px; border:1px solid black;">
To jest akapit z określonym lewym dopełnieniem
</p>

<p style="padding-left: 15%; border:1px solid black;">
To jest kolejny akapit z lewym określonym dopełnieniem w procentach 
</p>

 Poniżej wynik działania kodu:

To jest akapit z określonym lewym dopełnieniem

To jest kolejny akapit z lewym określonym dopełnieniem w procentach

 

Właściwość padding-right:

Właściwości padding-right ustawia dopełnienie z prawej strony (przestrzeni) elementu. Może to być wartość liczbowa lub procentowa %.

Oto przykład:

<p style="padding-right: 15px; border:1px solid black;">
To jest akapit z określonym prawym dopełnieniem
</p>

<p style="padding-right: 5%; border:1px solid black;">
To jest kolejny akapit z prawym określonym dopełnieniem w procentach
</p>


 Poniżej wynik działania kodu:

To jest akapit z określonym prawym dopełnieniem

To jest kolejny akapit z prawym określonym dopełnieniem w procentach

 

Właściwość padding:

Właściwość padding ustawia, lewe, prawe, górne i dolne dopełnienie (przestrzeni) elementu. Może to być wartość liczbowa lub procentowa %.

Oto przykład:

<p style="padding: 15px; border:1px solid black;">
wszystkie cztery dopełnienia będą miały 15px
</p>

<p style="padding:10px 2%; border:1px solid black;">
górne i dolne dopełnienie będzie miało 10px, lewe i prawe dopełnienie będzie miało 2% łącznej szerokości dokumentu.
</p>

<p style="padding: 10px 2% 10px; border:1px solid black;"> Górne dopełnienie będzie miało 10px, lewe i prawe dopełnienie będzie miało 2% łącznej szerokości dokumentu, dolne dopełnienie będzie wynosić 10px </p>

<p style="padding: 10px 2% 10px 10px; border:1px solid black;"> górne dopełnienie będzie miało 10px, prawe dopełnienie będzie wynosić 2% łącznej szerokości dokumentu, dopełnienie dolne i górne będzie wynosić 10px
</p>

 

wszystkie cztery dopełnienia będą miały 15px

górne i dolne dopełnienie będzie miało 10px, lewe i prawe dopełnienie będzie miało 2% łącznej szerokości dokumentu.

Górne dopełnienie będzie miało 10px, lewe i prawe dopełnienie będzie miało 2% łącznej szerokości dokumentu, dolne dopełnienie będzie wynosić 10px

górne dopełnienie będzie miało 10px, prawe dopełnienie będzie wynosić 2% łącznej szerokości dokumentu, dopełnienie dolne i górne będzie wynosić 10px

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.