Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu
CSS-laatikkomalli

Laatikko-ominaisuudet

Nämä ominaisuudet koskevat elementtien varaamaa tilaa, jossa elementtien muotoilun tuloksena on yksi tai useampi laatikko, mikäli elementti yleensä tulostetaan.

 _______________________________________
|           marginaali (margin)         |
|   _________________________________   |
|  |        reunaviiva (border)      |  |
|  |   ___________________________   |  |
|  |  |     täyte (padding)       |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  sisältöalue        |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

Toisin sanoin: elementin lopullinen koko, eli sille varattava alue määräytyy seuraavan kaavan mukaisesti:

  sisällön luontainen tai asetettu koko
+ täyte (alue, johon taustat ulottuvat)
+ reunaviiva (piirretään taustojen päälle)
+ marginaali (läpinäkyvä alue)
------------------------------
= laatiko(ide)n varaama tila
CSS 2.1 -laatikko-ominaisuudet visuaaliselle medialle
Ominaisuus Arvot
border [ <border-style> || <border-width> || <border-color> ]
border-bottom [ <border-style> || <border-width> || <border-color> ]
border-bottom-color <väri> | transparent
border-bottom-style dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid
border-bottom-width thin | medium | thick | <mitta>
border-color <väri> | transparent {1,4}
border-left [ <border-style> || <border-width> || <border-color> ]
border-left-color <väri> | transparent
border-left-style dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid
border-left-width thin | medium | thick | <mitta>
border-right [ <border-style> || <border-width> || <border-color> ]
border-right-color <väri> | transparent
border-right-style dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid
border-right-width thin | medium | thick | <mitta>
border-style dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid {1,4}
border-top [ <border-style> || <border-width> || <border-color> ]
border-top-color <väri> | transparent
border-top-style dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid
border-top-width thin | medium | thick | <mitta>
border-width thin | medium | thick | <mitta> {1,4}
margin <prosentti> | <mitta> | auto {1,4}
margin-bottom <prosentti> | <mitta> | auto
margin-left <prosentti> | <mitta> | auto
margin-right <prosentti> | <mitta> | auto
margin-top <prosentti> | <mitta> | auto
padding <prosentti> | <mitta> {1,4}
padding-bottom <prosentti> | <mitta>
padding-left <prosentti> | <mitta>
padding-right <prosentti> | <mitta>
padding-top <prosentti> | <mitta>
CSS 2.1 -ominaisuusreferenssi