Kävelymalli: CSS-ulkoreunien yhdistyminen

Ulkoreunien yhdistyminen tarkoittaa, että kun kaksi pystysuuntaista ulkoreunaa kohtaavat, ne muodostavat ulkoreunan.

Yhdistetyn ulkoreunan korkeus on suurempi kummastakin yhdistetystä ulkoreunasta.

Ulkoreunien yhdistyminen

Ulkoreunien yhdistyminen (yhteenliittäminen) on melko yksinkertainen käsite. Mutta käytännössä verkkosivujen rakentamisessa se aiheuttaa monia sekaannuksia.

Yksinkertaisesti sanottuna ulkoreunien yhdistyminen tarkoittaa, että kun kaksi pystysuuntaista ulkoreunaa kohtaavat, ne muodostavat ulkoreunan. Yhdistetyn ulkoreunan korkeus on suurempi kummastakin yhdistetystä ulkoreunasta.

Kun yksi elementti näkyy toisen elementin päällä, ensimmäisen elementin alapuolinen ulkoreuna ja toisen elementin yläpuolinen ulkoreuna yhdistyvät. Katso kuva alla:

Esimerkki CSS:n ulkopuolisen marginaalin yhdistämisestä 1

Kokeile itse!

Kun yksi elementti sisältyy toiseen elementtiin (oletetaan, että ulkoreunat eivät eristä ulkoreunoja sisäpuolisin reunoina tai reunaviivoineen), niiden ylä- ja/tai alapuoliset ulkoreunat yhdistyvät. Katso kuva alla:

Esimerkki CSS:n ulkopuolisen marginaalin yhdistämisestä 2

Kokeile itse!

Vaikka se saattaa näyttää hieman outolta, ulkoreunat voivat jopa yhdistyä itsensä kanssa.

Oletetaan, että on olemassa tyhjä elementti, jolla on ulkoreuna, mutta ei reunaviivaa tai täyttöä. Tässä tapauksessa ylä- ja alapuolinen ulkoreuna törmäävät toisiinsa ja ne yhdistyvät:

Esimerkki CSS:n ulkopuolisen marginaalin yhdistämisestä 3

Jos tämä marginaali törmää toisen elementin ulkopuoliseen marginaaliin, se yhdistyy myös:

Esimerkki CSS:n ulkopuolisen marginaalin yhdistämisestä 4

Tämä on syynä siihen, miksi sarja lukuja käyttää niin vähän tilaa, koska kaikki niiden ulkopuoliset marginaalit yhdistyvät yhdeksi pieneksi marginaaliksi.

Ulkopuolisen marginaalin yhdistäminen saattaa ensin näyttää hieman omituiselta, mutta todellisuudessa se on merkityksellistä. Esimerkiksi tyypillinen tekstisivu, joka koostuu useista luvuista, jossa ensimmäisen luvun yläpuolinen tila on yhtä suuri kuin luvun yläpuolinen marginaali. Jos ulkopuolisen marginaalin yhdistämistä ei tapahtuisi, kaikki seuraavien luvujen väliset marginaalit olisivat lähimmän yläpuolisen ja alapuolisen marginaalin summa. Tämä tarkoittaa, että lukuja erottava tila on kaksinkertainen sivun yläpuolelle.

CSS:n ulkopuolisen marginaalin yhdistämisestä käytännön merkitys

Huomautus:Vain tavallisessa dokumenttiläjityksessä olevien blokkien pystysuuntainen ulkopuolinen marginaali yhdistyy. Sisäisten blokkien, kelluvaisten tai absoluuttisesti sijoitettujen elementtien ulkopuoliset marginaalit eivät yhdisty.