Summary  
This chapter covers the CSS box model’s spacing properties—padding, margin, and border—including their shorthand syntax and individual side settings.

General domain of usage  
Web page layout design

Jokaisella elementillä on sisältö, täyte (padding), reunus (border) ja marginaali (margin). Katsotaan, miten näillä ominaisuuksilla hallitaan välistystä.

## Täyte (Padding)
Täyte luo tilaa **elementin sisälle**, sisällön ja reunuksen väliin.
```css
.box {
  padding: 20px;
}
```
Tämä lisää 20px täytettä kaikille neljälle sivulle.

### Täytteen lyhytmerkintä
Täyte voidaan määrittää lyhytmerkinnällä.

Arvojen järjestys on aina: ylä → oikea → ala → vasen

```css
padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */
```

### Yksittäiset täyteominaisuudet

Voit hallita jokaista sivua erikseen:
```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
```

## Marginaali
Marginaali luo tilaa **elementin ulkopuolelle**, sen ja muiden elementtien väliin.
```css
.box {
  margin: 20px;
}
```



### Marginaalin lyhytmuoto
Marginaali noudattaa samoja lyhytmuotosääntöjä kuin täyte:

```css
margin: 20px; /* all sides */
margin: 10px 20px; /* top/bottom | left/right */
margin: 10px 20px 5px; /* top | left/right | bottom */
margin: 10px 15px 20px 25px; /* top | right | bottom | left */
```

### Yksittäiset reunavälit (margin)
Voidaan asettaa myös yksittäin:
```css
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
```


## Reunaviiva (Border)
Reunaviiva sijaitsee **paddingin ja marginaalin välissä**.

Peruslyhennys:
```css
border: 4px solid brown;
```
Tämä määrittää: leveyden, tyylin, värin.

Yleisiä reunatyylejä ovat `solid`, `dotted`, `dashed` ja `double`.

Voit myös hallita yksittäisiä sivuja tarvittaessa:
```css
border-top: 2px solid black;
```

Tarkastellaan seuraavaa esimerkkiä ja selvitetään mahdolliset reunatyylit:



PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJib3JkZXItc2hvd2Nhc2UiPgogICAgICA8ZGl2IGNsYXNzPSJjYXJkIGJveC1vbmUiPgogICAgICAgIDxoMz5Tb2xpZCBCb3JkZXI8L2gzPgogICAgICAgIDxwPkEgY2xhc3NpYywgY2xlYW4gc29saWQgbGluZSB1c2VkIGluIG1vc3QgVUkgZWxlbWVudHMuPC9wPgogICAgICA8L2Rpdj4KCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQgYm94LXR3byI+CiAgICAgICAgPGgzPkRvdHRlZCBCb3JkZXI8L2gzPgogICAgICAgIDxwPlVzZWQgZm9yIG91dGxpbmVzLCBub3Rlcywgb3IgZGVjb3JhdGl2ZSBlbGVtZW50cy48L3A+CiAgICAgIDwvZGl2PgoKICAgICAgPGRpdiBjbGFzcz0iY2FyZCBib3gtdGhyZWUiPgogICAgICAgIDxoMz5EYXNoZWQgQm9yZGVyPC9oMz4KICAgICAgICA8cD5PZnRlbiBzZWVuIGluIGVkaXRhYmxlIGZpZWxkcyBvciAiZHJhZyBoZXJlIiB6b25lcy48L3A+CiAgICAgIDwvZGl2PgoKICAgICAgPGRpdiBjbGFzcz0iY2FyZCBib3gtZm91ciI+CiAgICAgICAgPGgzPkRvdWJsZSBCb3JkZXI8L2gzPgogICAgICAgIDxwPlN0eWxpc2ggYW5kIGJvbGQgLSB1c2VkIGZvciBlbXBoYXNpcyBvciBmcmFtaW5nLjwvcD4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwouYm94LW9uZSB7CiAgYm9yZGVyOiAycHggc29saWQgYnJvd247Cn0KCi5ib3gtdHdvIHsKICBib3JkZXI6IDJweCBkb3R0ZWQgYnJvd247Cn0KCi5ib3gtdGhyZWUgewogIGJvcmRlcjogMnB4IGRhc2hlZCBicm93bjsKfQoKLmJveC1mb3VyIHsKICBib3JkZXI6IDRweCBkb3VibGUgYnJvd247Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwouYm9yZGVyLXNob3djYXNlIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtd3JhcDogd3JhcDsKICBnYXA6IDMwcHg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWF4LXdpZHRoOiA5MDBweDsKfQoKLmNhcmQgewogIHdpZHRoOiAyMDBweDsKICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMDgpOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycyBlYXNlOwp9CgpoMyB7CiAgbWFyZ2luLXRvcDogMDsKICBmb250LXNpemU6IDE4cHg7CiAgY29sb3I6ICMzMzM7Cn0KCnAgewogIGZvbnQtc2l6ZTogMTRweDsKICBjb2xvcjogIzU1NTsKICBsaW5lLWhlaWdodDogMS41Owp9

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Current focus */
      .box-one {
        border: 2px solid brown;
      }

      .box-two {
        border: 2px dotted brown;
      }

      .box-three {
        border: 2px dashed brown;
      }

      .box-four {
        border: 4px double brown;
      }

      /* Additional styles for better appearance (not the current focus) */
      .border-showcase {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        max-width: 600px;
margin: auto;
      }

      .card {
        width: 200px;
        padding: 20px;
        border-radius: 12px;
        background-color: white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        text-align: center;
        transition: transform 0.2s ease;
      }

      h3 {
        margin-top: 0;
        font-size: 18px;
        color: #333;
      }

      p {
        font-size: 14px;
        color: #555;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <div class="border-showcase">
      <div class="card box-one">
        <h3>Yhtenäinen reunaviiva</h3>
        <p>Klassinen, selkeä yhtenäinen viiva – yleisin käyttöliittymäelementeissä.</p>
      </div>

      <div class="card box-two">
        <h3>Pisteviivareuna</h3>
        <p>Käytetään esimerkiksi korostuksiin, huomautuksiin tai koriste-elementteinä.</p>
      </div>

      <div class="card box-three">
        <h3>Katkoviivareuna</h3>
        <p>Näkyy usein muokattavissa kentissä tai "raahaa tähän" -alueilla.</p>
      </div>

      <div class="card box-four">
        <h3>Kaksoisreunaviiva</h3>
        <p>Tyylikäs ja näyttävä – käytetään korostukseen tai kehystämiseen.</p>
      </div>
    </div>
  </body>
</html>


Täyte (padding):
- Lisää tilaa elementin sisäpuolelle;
- Laajentaa tausta-aluetta.

Marginaali (margin):
- Lisää tilaa elementin ulkopuolelle;
- Ei vaikuta elementin taustaan.

Keskeinen ero

Mikä sivu saa arvon `40px` seuraavassa määrittelyssä?

Mikä ominaisuus lisää tilaa elementin sisälle, sen sisällön ja reunan väliin?

Hallitse CSS:n perusteet, tyylikieli, joka muuttaa verkkosivujen ulkoasun ja tuntuman. Tutustu keskeisiin käsitteisiin, kuten tekstityyleihin, väreihin, välistyksiin, laatikkomalliin, Flexboxiin ja koristeellisiin tehosteisiin. Kehitä taidot luoda visuaalisesti houkuttelevia ja hyvin jäsenneltyjä verkkosivuja.

Ymmärrä, miten CSS yhdistyy HTML:ään ja miten tyylejä sovelletaan selektoreiden avulla. Käytä värejä, tekstin muotoilua ja hover-efektejä visuaalisen esityksen hallintaan.

Paranna typografiaa käyttämällä riviväliä, välistyksiä, fonttiominaisuuksia ja mukautettuja fontteja. Hallitse fonttiperheitä, painoa, tyyliä ja kokoa paremman luettavuuden saavuttamiseksi.

Hallitse asettelun rakennetta käyttämällä margin-, padding-, border- ja width-ominaisuuksia. Ymmärrä laatikon koon määrittely sekä elementtien näyttötyypit, kuten block, inline ja inline-block.

Hallitse vaakasuoria ja pystysuoria asetteluja Flexbox-ominaisuuksien avulla. Säädä suuntaa, kohdistusta ja välistystä käyttöliittymäkomponenttien rakenteen määrittämiseksi.

Paranna asetteluja taustavärien, kuvien, pseudoelementtien ja varjojen avulla. Tyylittele visuaaliset komponentit syvyyden ja kontrastin luomiseksi.

Marginaali ja Täyte Yksinkertaisesti

Täyte (Padding)

Täytteen lyhytmerkintä

Yksittäiset täyteominaisuudet

Marginaali

Marginaalin lyhytmuoto

Yksittäiset reunavälit (margin)

Reunaviiva (Border)

Tuloste

1. Mikä sivu saa arvon `40px` seuraavassa määrittelyssä?

2. Mikä ominaisuus lisää tilaa elementin sisälle, sen sisällön ja reunan väliin?