Marginesy i obramowania

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

Górny margines

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.

Prawy margines

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.

Dolny margines

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.

Lewy margines

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.

Mieszane atrybuty marginesu

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.

Górny wewnętrzny margines

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.

Dolny wewnętrzny margines

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.

Lewy wewnętrzny margines

<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.

Prawy wewnętrzny margines

<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.

Mieszane atrybuty wewnętrznego marginesu

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).

Szerokość górnego obramowania

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

Szerokość prawego obramowania

<p style="border-right-width: 1mm">Akapit z prawym obramowaniem</p>

Akapit z prawym obramowaniem (tylko NC4)

Szerokość dolnego obramowania

<p style="border-bottom-width: 1mm">Akapit z dolnym obramowaniem</p>

Akapit z dolnym obramowaniem (tylko NC4)

Szerokość lewego obramowania

<p style="border-left-width: 1mm">Akapit z lewym obramowaniem</p>

Akapit z lewym obramowaniem (tylko NC4)

Mieszane atrybuty szerokości obramowania

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

Kolor obramowania

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)

Styl obramowania

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

Mieszane atrybuty górnego obramowania

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.

Mieszane atrybuty prawego obramowania

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.

Mieszane atrybuty dolnego obramowania

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.

Mieszane atrybuty lewego obramowania

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.

Mieszane atrybuty obramowania

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

Szerokość

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.

Wysokość

Analogicznie, możemy określać wysokość elementu:

<img src="cadcm4.gif" border=0 alt=" " style="height: 140px">

Opływanie

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