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).
Wielu elementom można nadawać obramowanie - z jednej lub kilku stron. Górny brzeg obramowania definiujemy następująco (tylko NC4 - IE4 realizuje polecenie w ramach definicji mieszanej):
<p style="border-top-width: 1mm">Akapit z górnym obramowaniem</p>
Akapit z górnym obramowaniem
<p style="border-right-width: 1mm">Akapit z prawym obramowaniem</p>
Akapit z prawym obramowaniem (tylko NC4)
<p style="border-bottom-width: 1mm">Akapit z dolnym obramowaniem</p>
Akapit z dolnym obramowaniem (tylko NC4)
<p style="border-left-width: 1mm">Akapit z lewym obramowaniem</p>
Akapit z lewym obramowaniem (tylko NC4)
Elementowi można przypisać obramowanie, podając szerokości obramowania kilku stron jednocześnie (realizowane z błędami).
<p style="border-with: 3mm 2mm">Akapit</p>Akapit
Dodatkowym atrybutem, który można zastosować w obramowaniu, jest kolor.
<p style="border-bottom-width: thick; border-color: red">Akapit z dolnym, grubym czerwonym obramowaniem</p>
Akapit z dolnym, grubym czerwonym obramowaniem (tylko NC4)
<p style="border-top-width: thin; border-color: red">Akapit z górnym, cienkim czerwonym obramowaniem</p>
Akapit z górnym, cienkim czerwonym obramowaniem (tylko NC4)
<p style="border-left-width: medium; border-color: red">Akapit z lewym, średnim czerwonym obramowaniem</p>
Akapit z lewym, średnim czerwonym obramowaniem (tylko NC4)
Dodatkowe polecenie umożliwia zdefiniowanie stylu obramowania (IE4 realizuje tylko częściowo i odmiennie od NN). Border-style przybiera wartości: none, dotted (nie realizowane), dashed (nie realizowane), solid, double, groove, ridge, inset, outset.
<p style="border: styl">Akapit</p>
Przykłady:
border: none
border: dashed
border: dotted
border: solid 2mm
border: double 3mm
border: groove 5mm red
border: ridge 5mm
border: inset 5mm
border: outset 5mm
Górne obramowanie może mieć definicję mieszaną, np.:
<p style="border-top: solid red thick">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Proszę zauważyć, że IE nie dostrzega polecenia border-top-width, ale poprawnie interpretuje definicję mieszaną! Odwrotnie zachowuje się NN!! To jeszcze jeden powód zachowywania należnej ostrożności w posługiwaniu się stylami.
Prawe obramowanie może mieć definicję mieszaną, np.:
<p style="border-right: solid olive double">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Dolne obramowanie może mieć definicję mieszaną, np.:
<p style="border-bottom: solid red fuchsia">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Lewe obramowanie może mieć definicję mieszaną, np.:
<p style="border-left: groove yellow 2mm">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Definiując obramowanie, możemy stosować definicję mieszaną, w której podamy jedynie polecenie border i wartości, rezygnując z wymieniania własności. Zamiast:
border-width: thick; border-style: double; border-color: red
Możemy wpisać po prostu:
border: thick double red
Internet Explorer 4 pozwala definiować szerokość elementu, np.:
<img src="cadcm4.gif" border=0 alt=" " style="width: 100px">
Nie podajemy przykładu, gdyż "rujnuje" on wyświetlanie strony w Netscape Communicatorze.
Analogicznie, możemy określać wysokość elementu:
<img src="cadcm4.gif" border=0 alt=" " style="height: 140px">Style pozwalają definiować opływanie tekstem różnych elementów. Rozszerzają one znane już z HTML 3.2 polecenia ALIGN=. Stosujemy tutaj polecenie float: right, float: left lub float: none. Na przykład:
<p style="float: right"> </p>
brak polecenia float
ten tekst nie oblewa grafiki
float: right (tylko NC4)
ten tekst opływa grafikę z prawej strony ten tekst opływa grafikę z prawej strony ten tekst opływa grafikę z prawej strony ten tekst opływa grafikę z prawej strony
.
float: left (tylko NC4)
ten tekst oblewa grafikę z lewej strony ten tekst oblewa grafikę z lewej strony ten tekst oblewa grafikę z lewej strony ten tekst oblewa grafikę z lewej strony
float: none (tylko NC4)
ten tekst nie oblewa grafiki ten tekst nie oblewa grafiki ten tekst nie oblewa grafiki ten tekst nie oblewa grafiki
float: left (tylko NC4)
ten tekst oblewa wykaz z lewej strony ten tekst oblewa wykaz z lewej strony
ten tekst oblewa wykaz z lewej strony ten tekst oblewa wykaz z lewej strony
float: right (tylko NC4)
ten tekst oblewa tabelę z prawej strony ten tekst oblewa tabelę z prawej strony ten tekst oblewa tabelę z prawej strony ten tekst oblewa tabelę z prawej strony
| 1 | 2 | 3 |
| 4 | 5 | 6 |