Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.
Polecenie margin-top: xxx pozwala wprowadzić górny margines dla danego elementu, a więc dodatkowy odstęp między nim a poprzedzającym go elementem.
<p style="margin-top: 2cm">To jest treść akapitu</p>
To jest pierwszy akapit.
To jest drugi akapit, w którym górny margines ma 2 cm.
Polecenie margin-right: xxx pozwala wprowadzić prawy margines dla danego elementu, a więc dodatkowy odstęp między nim a prawym brzegiem strony czy następującym po nim elementem.
<p style="margin-right: 2cm">To jest treść akapitu</p>
To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm.
Polecenie margin-bottom: xxx pozwala wprowadzić dolny margines dla danego elementu, a więc dodatkowy odstęp między nim a następującym po nim elementem.
<p style="margin-bottom: 2cm">To jest treść akapitu</p>
To jest pierwszy akapit, w którym dolny margines ma 2 cm.
To jest drugi akapit.
Polecenie margin-left: xxx pozwala wprowadzić lewy margines dla danego elementu, a więc dodatkowy odstęp między nim a lewym brzegiem strony czy poprzedzającym go elementem.
<p style="margin-left: 10%">To jest treść akapitu</p>
To jest akapit, w którym lewy margines ma 10 procent.
Możemy podawać mieszane wartości marginesów dla danego elementu, poslugując się poleceniem margin:. Przykładowo:
p style="margin: 1cm" wprowadzi 1-centymetrowy margines ze wszystkich stron.
p style="margin: 1cm 2cm" wprowadzi 1-centymetrowy margines u góry i u dołu oraz 2-centymetrowy margines z lewej i z prawej strony.
p style="margin: 1cm 2cm 0.5cm 1.5cm" wprowadzi odrębne marginesy dla każdej ze stron.
Różne elementy możemy oddzielać od innych, definiując dodatkowy wewnętrzny margines, poszerzający "naturalny" odstęp.
<p style="padding-top: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstępem.</p>
Akapit oddzielony od górnego brzegu obramowania 1-centymetrowym odstępem.
| Akapit oddzielony od górnego brzegu komórki tabeli 5-milimetrowym odstępem. |
Akapit oddzielony od obrazka dodatkowym, 1-centymetrowym odstępem.
W analogiczny sposób tworzymy dolny wewnętrzny margines.
<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.
<p style="padding-left: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstępem.</p>
Akapit oddzielony od lewego brzegu obramowania 1-centymetrowym odstępem.
<p style="padding-right: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym odstępem.</p>
Akapit oddzielony od prawego brzegu obramowania 1-centymetrowym odstępem. Akapit oddzielony od prawego brzegu obramowania 1-centymetrowym odstępem.
Możemy ustalić kilka atrybutów padding jednocześnie. Na przykład:
<p style="padding: 1cm">Akapit oddzielony od obramowania dodatkowymi odstępami.</p>
Akapit oddzielony od obramowania dodatkowymi odstępami
Możemy także podać odrębne wartości dla kolejnych marginesów, np. 1cm 2cm - górny/dolny prawy/lewy (realizowane z błędami).