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.

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

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