CSS ulkoreuna

Tämän elementin ulkopuolimarginaali on 70px.

Kokeile itse

CSS ulkoreuna

CSS margin Ominaisuus luo tilaa elementin määritellyn reunan ulkopuolelle.

CSS:n avulla voit täysin hallita ulkopuolimarginaaleja. Joitakin ominaisuuksia voidaan käyttää elementin jokaisen puolen (ylä, oikea, alapuoli ja vasen) ulkopuolimarginaalin asettamiseen.

Margin - yksittäinen reunus

CSS:llä on ominaisuuksia, joilla voidaan määrittää elementin jokaisen puolen ulkopuolimarginaali:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Kaikki ulkopuolimarginaal ominaisuudet voivat asettaa seuraavat arvot:

  • auto - Selain laskee ulkopuolimarginaalin
  • length - Määritä ulkopuolimarginaali px, pt, cm jne. yksiköissä
  • % - Määritä ulkopuolimarginaali sisältävän elementin leveyden prosentteina
  • inherit - Määritä, että ulkopuolimarginaali tulee perittää isältä elementiltä

Vinkki:Negatiiviset arvot ovat sallittuja.

Esimerkki

Aseta <p>-elementin kaikki neljä reunaa erilaisille ulkopuolimarginaaleille:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Kokeile itse

Margin - lyhenteenomaisuus

Koodin supistamiseksi voidaan määrittää kaikki ulkopuolimarginaalit yhdessä ominaisuudessa.

margin Ominaisuus on seuraavien ulkopuolimarginaalien lyhenteenomaisuus:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Toimintaperiaate on seuraava:

Jos margin Ominaisuudella on neljä arvoa:

  • margin: 25px 50px 75px 100px;
    • Yläpuolimarginaali on 25px
    • Oikea ulkopuolimarginaali on 50px
    • Alapuolimarginaali on 75px
    • Vasen ulkopuolimarginaali on 100px

Esimerkki

margin lyhenteenomaisessa ominaisuudessa asetetaan neljä arvoa:

p {
  margin: 25px 50px 75px 100px;
}

Kokeile itse

Jos margin Ominaisuus asetti kolme arvoa:

  • margin: 25px 50px 75px;
    • Yläpuolimarginaali on 25px
    • Oikea ja vasen ulkopuolimarginaali ovat 50px
    • Alapuolimarginaali on 75px

Esimerkki

Käytä asettamalla kolme arvoa margin lyhenteenomaisessa ominaisuudessa:

p {
  margin: 25px 50px 75px;
}

Kokeile itse

Jos margin Ominaisuus asetti kaksi arvoa:

  • margin: 25px 50px;
    • Ylä- ja alapuolimarginaalit ovat 25px
    • Oikea ja vasen ulkopuolimarginaali ovat 50px

Esimerkki

Käytä asettamalla kaksi arvoa margin lyhenteenomaisessa ominaisuudessa:

p {
  margin: 25px 50px;
}

Kokeile itse

Jos margin Ominaisuus asetti arvon:

  • margin: 25px;
    • Kaikki neljä ulkopuolimarginaalia ovat 25px

Esimerkki

Käytä asettaaksesi arvon margin lyhenteenomaisessa ominaisuudessa:

p {
  margin: 25px;
}

Kokeile itse

auto arvo

Voit asettaa margin-ominaisuuden autojotta elementti keskittyy horisontaalisesti sen kontissa.

Sitten, elementti vie määritetyn leveyden, ja jäljelle jäävä tila jaetaan tasaisesti vasemman ja oikean reunan välillä.

Esimerkki

Käytä margin: auto：

div {
  width: 300px;
  margin: auto;
  border: 1px solmuun punainen;
}

Kokeile itse

inherit-arvo

Tämä esimerkki tekee <p class="ex1">-elementin vasemman ulkoreunan perimästä (div):

Esimerkki

Käytä inherit-arvoa:

div {
  border: 1px solmuun punainen;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

Kokeile itse

Lisäluettelo

Oppikirja:Runkomalli: CSS ulkoreuna