\(\renewcommand{\vec}[1]{\mathbf{#1}} \DeclareMathOperator*{\sijoitus}{\Big/} \newcommand{\eval}[2]{\sijoitus_{\kern-0.7em#1}^{\kern0.7em#2}\!} \)

5.1.2.6.1 Marginaalit (margin)

Marginaalien avulla saadaan tyhjää tilaa tekstin tai muun elementin ympärille. Tila voidaan säätää erikseen joka suuntaan. Mittayksikkö voi olla pikseli (px), prosentti (%, huom. aina selainikkunan leveydestä! ) tai em, joka tarkoittaa fontin kokoa.

Alla on melko monenlaisia esimerkkejä

<html> <head> <title>Untitled</title> <style type="text/css"> .vasenmarginaali {margin-left: 50%} .ruutu {border: 2px solid blue} p {margin: 0; color: red} </style> </head> <body> <p>Vertailuruutu:</p> <div class="ruutu"> Tekstille ja elementeille täällä ei ole asetettu mitään marginaaleja. </div> <p>Ruutu 1:</p> <div class="ruutu"> <div class="vasenmarginaali"> Tekstiä ja elementtejä täällä koskee asetus <b> "margin-left: 50%</b>". </div> </div> </body </html>
nuolioik (1K) cssmarginesim0 (23K)

Vasemmalla oleva merkkaus saa aikaan oikealla näkyvän sivun (Mozilla Firefox).

<html> <head> <title>Untitled</title> <style type="text/css"> <!-- .vasenmarginaali {margin-left: 50%} .oikeamarginaali {margin-right: 50px} .ylamarginaali {margin-top: 8%} .alamarginaali {margin-bottom: 5em} .marginaalit {margin: 20px 50px 10px 120px} .ruutu {border: 2px solid blue} p {margin: 0; color: red} --> </style> </head> <body> <p>Vertailuruutu:</p> <div class="ruutu"> Tekstille ja elementeille täällä ei ole asetettu mitään marginaaleja, mikä merkitsee sitä, että teksti tässä ruudussa on ihan reunojen lähellä. Tähän voi verrata seuraavia esimerkkejä. </div> <p>Ruutu 1:</p> <div class="ruutu"> <div class="vasenmarginaali"> Tekstiä ja elementtejä täällä koskee asetus "<b>margin-left: 50%</b>", mikä merkitsee sitä, että ruudun vasemman reunan ja sisällön välissä on tyhjä tila, jonka leveys on 50 % selainikkunan leveydestä. </div> </div> <p>Ruutu 2:</p> <div class="ruutu"> <div class="oikeamarginaali"> Tekstiä ja elementtejä täällä koskee asetus "<b>margin-right: 50px</b>", mikä merkitsee sitä, että ruudun oikean reunan ja sisällön välissä on tyhjä tila, jonka leveys on 50 pikseliä. </div> </div> <p>Ruutu 3:</p> <div class="ruutu"> <div class="ylamarginaali"> Tekstiä ja elementtejä täällä koskee asetus "<b>margin-top: 8%</b>", mikä merkitsee sitä, että ruudun yläreunan ja sisällön välissä on tyhjä tila, jonka korkeus on 8 % selainikkunan <b>leveydestä</b>(!). </div> </div> <p>Ruutu 4:</p> <div class="ruutu"> <div class="alamarginaali"> Tekstiä ja elementtejä täällä koskee asetus "<b>margin-bottom: 5em</b>", mikä merkitsee sitä, että ruudun alareunan ja sisällön välissä on tyhjä tila, jonka korkeus on noin 5 kertaa fontin korkeus. </div> </div> <p>Ruutu 5:</p> <div class="ruutu"> <div class="marginaalit"> Tekstiä ja elementtejä täällä koskee asetus "<b>margin: 20px 50px 10px 120px</b>", mikä merkitsee sitä, että ruudun reunojen ja sisällön välissä on tyhjät tilat niin, että ylhäällä on 20px, oikealla 50px, alhaalla 10px ja vasemmalla 120px (myötäpäivään). </div> </div> </body> </html>
cssmarginesim2 (51K) cssmarginesim2b (21K)