Päivitetty: 18.01.2003.

Box

<< Ominaisuudet

margin-top, -right, -bottom ja -left

Alla olevissa esimerkeissä marginaalit näkyvät tummanvihreänä.

CSS määrittely

p { margin-top:30px}

 

( text-aling-right + ) p {margin-right: 40px}

 

p {margin-bottom: 20px}

 

p { margin-left: 25%}

<< Alkuun

margin

Alla olevissa esimerkeissä marginaalit näkyvät värillä tummanvihreänä.

Pikakirjoite ja tulos: Voidaan kirjoittaa myös:

margin 0 /' oletusarvo */

margin 0 0

margin: 50px

margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
  margin-top: 25px;
margin-right: 10px;
margin-bottom: 25px;
margin-left: 10px;

margin: 25px 10px

  margin-top: 5px;
margin-right: 60px;
margin-bottom: 25px;
margin-left: 60px;

margin: 5px 60px 25px

  margin-top: 20px;
margin-right: 60px;
margin-bottom: 30px;
margin-left: 5px;

margin: 20px 60px 30px 5px

<< Alkuun

padding-top, -right, -bottom ja -left

Alla olevissa esimerkeissä täyte näkyy valkoisen värisenä.

padding-top: 1.3cm

 

( text-aling-right + ) padding-right: 40px

 

padding-bottom: 3em

 

padding-left: 25%

<< Alkuun

padding

Alla olevissa esimerkeissä täyte näkyy valkoisen värisenä.

Pikakirjoite ja tulos: Voidaan kirjoittaa myös:

padding: 0 /' oletusarvo */

padding: 0 0
  padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

padding: 30px /*- - - - - - - - - -*/
|- - - - - - - - - - - - - - - - - - - - - - -|

  padding-top: 5px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;

padding: 5px 50px /*-*/
|- - - - - - - - - - - - - - - - - |

  padding-top: 30px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

padding: 30px 20px 10px /* - - - */
|- - - - - - - - - - - - - - - - - - - - - - - - - |

  padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

padding:10px 20px 30px 40px
| - - - - - - - - - - - - - - - - - - - - - - |

<< Alkuun

border |-top-|-right-|-bottom-|-left-| width

border-top-width: 0.3cm

Koska border ei näy ellei väriä ja tyyliä ole määritelty. Viereiset esimerkit sisältävät myös seuraavat määritteet:

border-color: Maroon;
border-style: Solid
.

 

border-right-width: 10px

 

border-bottom-width: 0.8ex

   

border-left-width: medium

 
   

border-top-width: 2px
border-bottom-width: 2px

 

<< Alkuun

border-width

border-width: thin

border-width: 3px 0px

border-width: thin thick

border-width: 0px 4px

border-width: 2px 4px 8px

border-width: 2px 0px 0px 2px

border-width: 1px 3px 6px 9px

border-width: 0px 3px 3px 0px

<< Alkuun

border-color

border-color: black

border-color: Red Green Blue

border-color: Red Blue

border-color: Gray Red Green Blue

<< Alkuun

border-style

border-style:
none

border-style:
dotted

border-style:
dashed

border-style:
solid

border-style:
double

border-style:
groove

border-style:
ridge

border-style:
inset

border-style:
outset

<< Alkuun

border-top, -right, -bottom ja -left

border-top: 2px outset red

border-right: 10px solid #0000FF

border-bottom: thick double maroon

border-left: 6mm solid #F00

<< Alkuun

border

border: 4px double red

border: thick outset #0F0

border: 5px groove blue

border: 1px dashed black

<< Alkuun

float ja clear

Huomaa, että lohkot ovat HTML koodissa kirjoitettu aakkosjärjestyksessä eli ensin A siten B, C , D jne.

float:left
Lohko A
Lohko A
Lohko A
Lohko A
Lohko A

Lohko B
Lohko B

Lohko C
Lohko C

clear:left
Lohko D

float:right
Lohko A
Lohko A
Lohko A
Lohko A
Lohko A

Lohko B
Lohko B

Lohko C
Lohko C

clear:right
Lohko D

Lohkolla A on ominaisuus float:left, joten muut lohkot kiertävät sen oikealta. Lohkossa D oleva ominaisuus clear:left katkaisee kierron.

Lohkolla A on ominaisuus float:right, joten muut lohkot kiertävät sen vasemmalta. Lohkossa D oleva ominaisuus clear:right katkaisee kierron.

 

float:left
Lohko A
Lohko A
Lohko A
Lohko A
Lohko A

float:left
Lohko B
Lohko B
Lohko B
Lohko B
Lohko B

float:left
Lohko C
Lohko C
Lohko C
Lohko C
Lohko C

Lohko D

Lohko E

Lohko F

clear:left

Lohkoilla A, B ja C on arvo float:left, jolloin ne kiertävät toisensa aina oikealta. Lohkot D, E ja F kiertävät lohkon C oikealta.

 

float:right
Lohko A
Lohko A
Lohko A

float:left
Lohko B

float:left
Lohko C

--
Lohko D

clear:both

Lohkolla A on ominaisuus float:right, joten muut kiertävät sen vasemmalta. Lohkot B ja C saavat arvot float:left joten ne jäävät vasemmalle. Viimeinen lohkon ominaisuus clear: both katkaisee molemmat kierrot.

<< Alkuun

© Petteri Perälä 2001-2003.
E-mail: [ petepe@mbnet.fi ]