Runkomalli: CSS:n ulkopuoliskunaukset

Aineiston reunaa ympäröivä tyhjä alue on ulkopuoliskuna. Ulkopuoliskunauksien asettaminen luo lisää tyhjää elementin ulkopuolelle.

Yksi yksinkertaisimmista tavoista asettaa ulkopuoliskunaukset on käyttää margin-ominaisuutta, joka hyväksyy kaikki mittayksiköt, prosenttiosuudet ja jopa negatiiviset arvot.

CSS margin ominaisuus

Yksi yksinkertaisimmista tavoista asettaa ulkopuoliskunaukset on käyttää margin-ominaisuus.

margin-ominaisuus hyväksyy kaikki mittayksiköt, jotka voivat olla pikseleitä, tuumia, millimetrejä tai emeitä.

margin voidaan asettaa auto. Yleisimmät käytännöt ovat ulkopuoliskunauksien pituuksien asettaminen. Alla oleva lause määrittää h1-elementin kaikilla reunoilla 1/4 tuuman leveät tyhjät alueet:

h1 {margin : 0.25in;}

Esimerkki alla olevassa määrittää h1-elementin neljän reunan eri ulkopuoliskunaukset, käytetyt mittayksiköt ovat pikseleitä (px):

h1 {margin : 10px 0px 15px 5px;}

Kuten sisäreunauksien asettamisessa, näiden arvojen järjestys on alareuna (top) alkaen ja elementin ympärillä kiertäen myötäpäivään:

margin: top right bottom left

Lisäksi voit asettaa ulkoreunauksille prosenttiosuuden:

p {margin: 10%;}

Prosenttiosuudet lasketaan suhteessa vanhemman elementin leveysyn. Yllä olevassa esimerkissä p-elementille asetettu ulkoreuna on vanhemman elementin leveys 10 %:n osuus.

marginin oletusarvo on 0, joten jos margin-arvoa ei ole määritetty, ulkoreunauksia ei näy. Käytännössä kuitenkin selaimet tarjoavat useille elementeille ennakkosuunnattuja tyylejä, ja ulkoreunaukset ovat osa tätä. Esimerkiksi CSS-tuen saavuttavissa selaimissa ulkoreunaukset luovat jokaiselle kappale-elementille ylä- ja alareunauksille 'tyhjiä rivejä'. Siksi, jos kappale-elementille ei ole määritetty ulkoreunauksia, selain saattaa itse soveltaa ulkoreunauksia. Totta kai, voit aina korvata oletusarvon erityisellä määrittelyllä.

Arvojen kopiointi

Muistatko? Olemme puhuneet edellisissä luvuissa arvojen kopiointista. Seuraavaksi selitämme, miten voit käyttää arvojen kopiointia.

Joskus kirjoitamme joitakin toistuvia arvoja:

p {margin: 0,5em 1em 0,5em 1em;}

Arvojen kopiointia käyttämällä et tarvitsee kirjoittaa näitä lukuja toistuvasti. Yllä oleva sääntö on sama kuin seuraava:

p {margin: 0,5em 1em;}

Nämä kaksi arvoa voivat korvata edelliset neljä arvoa. Miten tämä tehdään? CSS määrittää joitakin sääntöjä, jotka sallivat ulkoreunauksille määrittää vähemmän kuin neljä arvoa. Säännöt ovat seuraavat:

  • Jos vasen ulkoreunan arvoa ei ole annettu, käytetään oikean ulkoreunan arvoa.
  • Jos alareunan arvoa ei ole annettu, käytetään yläulkoreunan arvoa.
  • Jos oikean ulkoreunan arvoa ei ole annettu, käytetään yläulkoreunan arvoa.

Seuraavassa kuvassa on esitetty tätä aiempaa selkeämmällä tavalla:

CSS 值复制

Toisin sanoen, jos ulkoreunauksille on määritetty kolme arvoa, neljäs arvo (eli vasen ulkoreuna) kopioidaan toisesta arvosta (oikea ulkoreuna). Jos annetaan kaksi arvoa, neljäs arvo kopioidaan toisesta arvosta, kolmas arvo (alareuna) kopioidaan ensimmäisestä arvosta (yläreuna). Viimeisessä tapauksessa, jos annetaan vain yksi arvo, muiden kolmen ulkoreunan arvot kopioidaan tästä arvosta (yläreuna).

Käytä tätä yksinkertaista mekanismia, kun määrität vain tarvittavat arvot, ei välttämättä kaikki neljä arvoa, esimerkiksi:

h1 {margin: 0,25em 1em 0,5em;}	/* Yhtä kuin 0,25em 1em 0,5em 1em */
h2 {margin: 0,5em 1em;}		/* Yhtä kuin 0,5em 1em 0,5em 1em */
p {margin: 1px;}			/* Yhtä kuin 1px 1px 1px 1px */

Tämä menetelmällä on pieni haitta, jota varmasti kohtaat. Oletetaan, että haluat asettaa p-elementin ylä- ja vasemman ulkoreunan 20 pikseeliin, alapuolen ja oikeanpuolen ulkoreunan 30 pikseeliin. Tässä tapauksessa sinun täytyy kirjoittaa:

p {margin: 20px 30px 30px 20px;}

Näin voit saavuttaa haluamasi tuloksen. Valitettavasti, tässä tapauksessa tarvittavien arvojen määrää ei voida vähentää.

Tarkastellaan toista esimerkkiä. Jos haluat, että kaikki ulkoreunat lukuun ottamatta vasenta ulkoreunaa ovat auto (vasen ulkoreuna on 20px):

p {margin: auto auto auto 20px;}

Samoin, näin voit saavuttaa haluamasi vaikutuksen. Ongelma on, että näiden autojen kirjoittaminen on hieman vaivatonta. Jos haluat vain hallita elementin yksipuolisia ulkoreunoja, käytä yksipuolisia ulkoreunamäärittelyjä.

Yksipuolinen ulkoreunamäärittely

Voit käyttää yksipuolisia ulkoreunamäärittelyjä asettaaksesi elementin yksipuolisen ulkoreunan arvon. Oletetaan, että haluat asettaa p-elementin vasemman ulkoreunan 20px:ksi. Ei tarvitse käyttää marginia (tarvitsee kirjoittaa paljon auto), vaan voit käyttää seuraavaa menetelmää:

p {margin-left: 20px;}

Voit käyttää seuraavista määritteistä yhtä kuin asettaaksesi vastaavan ulkoreunan, ilman että se vaikuttaa kaikkiin muihin ulkoreunoihin:

Yksi säännöllä voidaan käyttää useita tällaisia yksipuolisia ominaisuuksia, esimerkiksi:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

Totta kai, tässä tapauksessa margin on helpompi käyttää:

p {margin: 20px 30px 30px 20px;}

Vaihtamatta, että käytät yksipuolista ominaisuutta tai marginia, saadut tulokset ovat samat. Yleisesti ottaen, jos haluat asettaa ulkoreunat useille sivuille, margin on helpompi käyttää. Kuitenkin, dokumenttien näyttökulmasta näkökulmasta, todellisuudessa ei ole merkitystä, mikä menetelmä käytetään, joten sinun täytyy valita se, mikä on helpointa sinulle.

Vinkit ja huomiot

Vinkki:Netscape ja IE määrittelevät body-merkin oletusulkoreunat (margin) arvoksi 8px. Opera ei ole näin. Päinvastoin, Opera määrittelee sisäisen täyttöä (padding) oletusarvon 8px:ksi, joten jos haluat säätää koko verkkosivuston reunia ja näyttää ne oikein Opera:ssa, sinun täytyy määrittää body:n padding itse.

CSS ulkoreunat esimerkki:

Aseta tekstin vasen ulkoreuna
Tämä esimerkki näyttää, kuinka asetetaan tekstin vasen ulkopuoli.
Aseta tekstin oikea ulkopuoli
Tämä esimerkki näyttää, kuinka asetetaan tekstin oikea ulkopuoli.
Aseta tekstin ylin ulkopuoli
Tämä esimerkki näyttää, kuinka asetetaan tekstin ylin ulkopuoli.
Aseta tekstin alin ulkopuoli
Tämä esimerkki näyttää, kuinka asetetaan tekstin alin ulkopuoli.
Kaikki ulkopuoliasetukset yhdessä lausekkeessa.
Tämä esimerkki näyttää, kuinka kaikki ulkopuoliasetukset voidaan asettaa yhdessä lausekkeessa.

CSS ulkopuoliasetukset

Ominaisuus Kuvaus
margin Yhteenvetolauseke. Aseta kaikki ulkopuoliasetukset yhdessä lausekkeessa.
margin-bottom Aseta elementin alin ulkopuoli.
margin-left Aseta elementin vasen ulkopuoli.
margin-right Aseta elementin oikea ulkopuoli.
margin-top Aseta elementin ylin ulkopuoli.