CSS-ulkopuolisen marginaalimerkinnän yhdistäminen

Ulkopuolimarginaalimerkinnä tarkoittaa, että kun kaksi pystysuuntaista ulkopuolimarginaalia kohtaavat, ne muodostavat ulkopuolimarginaalin.

Yhdistetyn ulkopuolimarginaalin korkeus on suurempi kuin yhdistetyistä ulkopuolimarginaaleista suurempi korkeus.

Ulkopuolimarginaalimerkinnä

Ulkopuolimarginaalimerkinnä (yhdistäminen) on melko yksinkertainen käsite. Mutta käytännössä verkkosivujen suunnittelussa se aiheuttaa monia sekaannuksia.

Yksinkertaisesti sanottuna ulkopuolimarginaalimerkinnä tarkoittaa, että kun kaksi pystysuuntaista ulkopuolimarginaalia kohtaavat, ne muodostavat ulkopuolimarginaalin. Yhdistetyn ulkopuolimarginaalin korkeus on suurempi kuin yhdistetyistä ulkopuolimarginaaleista suurempi korkeus.

Kun yksi elementti näkyy toisen elementin yläpuolella, ensimmäisen elementin alapuolimarginaali ja toisen elementin yläulkopuolimarginaali yhdistyvät. Katso alla oleva kuva:

Esimerkki CSS:n ulkopuolisen marginaalimerkinnän yhdistämisestä 1

Kokeile itse

Kun yksi elementti sisältyy toiseen elementtiin (oletetaan, että ulkopuolimarginaaleja ei eristä sisäpuolimarginaaleilla tai reunaviivoilla), niiden ylä- ja/tai alapuolimarginaalit yhdistyvät myös. Katso alla oleva kuva:

Esimerkki CSS:n ulkopuolisen marginaalimerkinnän yhdistämisestä 2

Kokeile itse

Vaikka se saattaa näyttää hieman omituvalta, ulkopuolimarginaali voi myös yhdistyä itsensä kanssa.

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

Esimerkki CSS:n ulkopuolisen marginaalimerkinnän yhdistämisestä 3

Jos tämä ulkopuolimarginaali kohtaa toisen elementin ulkopuolimarginaalin, se voi myös yhdistyä:

Esimerkki CSS:n ulkopuolisen marginaalimerkinnän yhdistämisestä 4

Tämä on syy siihen, miksi sarja kappaleelementtejä vie hyvin vähän tilaa, koska kaikki niiden ulkopuolimarginaalit yhdistyvät yhdessä muodostaen pienen ulkopuolimarginaalin.

Ulkopuolimarginaalimerkinnästä saattaa tuntua hieman omituvalta ensisilmäyksellä, mutta todellisuudessa se on merkityksellistä. Esimerkiksi tyypillinen tekstisivu, joka koostuu useista kappaleista. Ensimmäisen kappaleen ylätila on yhtä suuri kuin kappaleen yläulkopuolimarginaali. Ilman ulkopuolimarginaalimerkinnää, kaikki seuraavien kappaleiden väliset ulkopuolimarginaalit olisivat lähimmän ylä- ja alapuolimarginaalin summa. Tämä tarkoittaa, että kappaleiden välinen tila on kaksinkertainen sivun yläosaan verrattuna. Jos ulkopuolimarginaalimerkinnä tapahtuu, kappaleiden ylä- ja alapuolimarginaalit yhdistyvät yhdessä, mikä tekee kaikista etäisyyksistä yhtenäisiä.

CSS:n ulkopuolisen marginaalimerkinnän konkreettinen merkitys

Huomautus:Vain tavallisessa dokumenttifluksissa olevien lohkokappaleiden pystysuuntainen ulkopuolimarginaali kohtaa ulkopuolimarginaalimerkinnän. Riveittäin olevien kappaleiden, liukuvien kappaleiden tai absoluuttisesti sijoitetun kappaleen ulkopuolimarginaalit eivät kohtaa.

Kaikki CSS:n ulkopuolimarginaalit

Ominaisuus Kuvaus
margin Yksinkertainen kieli, jolla asetetaan ulkoiset reunavälit yhdessä lauseessa.
margin-bottom Asettaa elementin alareunan ulkoisen reunavälin.
margin-left Asettaa elementin vasemman reunan ulkoisen reunavälin.
margin-right Asettaa elementin oikean reunan ulkoisen reunavälin.
margin-top Asettaa elementin yläulkoisen reunavälin.