Verkkojulkaisemisen oppimateriaaleja

CSS:n laatikkomalli

CSS:ssa kaikkia kappaletason elementtejä käsitellään laatikoina. Ellei toisin ole määritetty, "elemttilaatikot" asettuvat webbisivulla allekkain, ja ne ovat aina koko niille tarjolla olevan tilan levyisiä.

• Elementin leveys tai korkeus koskee vain elementin sisältöä (Huom! IE 5 laskee leveyden väärin siten, että siihen tulee mukaan myös padding-määreen arvo)
• Elemntin taustakuva tai -väri peittää sisällön lisäksi padding-määreen kattaman tilan
• Peräkkäisten elementtein marginaalit menevät ylä- ja alasuunnassa keskenään sisäkkäin. Esim. kahden peräkkäsen kappaleen, joilla molemmilla on 1em kokoinen marginaali, väliin jää vain 1em kokoinen tila, sillä marginaalit menevät limittäin.

Ohjeita ja lisätietoja

• Basic CSS Box Model Demo
  Säädettävä, kolmiulotteinen havaintokuva siitä, miten taustaväri, taustakuva ja reunukset asettuvat päällekkäin CSS:n laatikkomallissa (tstme)