CSS sisäreunat

Tämän elementin sisäpuolinen marginaali on 70px.

CSS sisäreunat

CSS padding Attribuutti käytetään luomaan tilaa elementin määritellyn reunan ympärille.

CSS:n avulla voit täysin hallita sisäpuolista marginaalia (täyttöä). Joitakin attribuutteja voidaan käyttää elementin jokaisen sivun (ylä, oikea, alapuoli ja vasen) sisäpuolisen marginaalin määrittämiseen.

Padding - erillinen sivu

CSS:llä on attribuutteja, joita käytetään elementin jokaisen sivun sisäpuolisen marginaalin määrittämiseen:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Kaikki sisäpuolisen marginaalin attribuutit voivat asettaa seuraavat arvot:

  • length - Määritä sisäpuolisen marginaalin arvo px, pt, cm jne. yksiköissä
  • % - Määritä sisäpuolisen marginaalin arvo prosentteina sisältöelementin leveydestä
  • inherit - Määritä, että sisäpuolisen marginaalin arvo tulisi perittää isältä elementiltä

Vinkki:Negatiivisia arvoja ei sallita.

Esimerkki

Aseta <div>-elementin neljän sivun sisäpuolinen marginaali eri tavoin:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Kokeile itse

Padding - lyhennetty attribuutti

Vähentääkseen koodia, voit määrittää kaikki sisäpuolisen marginaalin attribuutit yhdessä attribuutissa.

padding Ominaisuus on seuraavien sisäisten reunavälien yksinkertaistettu muoto:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Toimintamekanismi on seuraava:

Jos padding Ominaisuus on seuraavien sisäisten reunavälien yksinkertaistettu muoto:

  • padding: 25px 50px 75px 100px;
    • Yläinen sisäinen reunaväli on 25px
    • Oikea sisäinen reunaväli on 50px
    • Alainen sisäinen reunaväli on 75px
    • Vasen sisäinen reunaväli on 100px

Esimerkki

Käytä padding-ominaisuutta, joka on asetettu neljällä arvolla:

div {
  padding: 25px 50px 75px 100px;
}

Kokeile itse

Jos padding Ominaisuus asetettu kolmella arvolla:

  • padding: 25px 50px 75px;
    • Yläinen sisäinen reunaväli on 25px
    • Oikea ja vasen sisäinen reunaväli ovat 50px
    • Alainen sisäinen reunaväli on 75px

Esimerkki

Käytä padding-ominaisuutta, joka on asetettu kolmella arvolla:

div {
  padding: 25px 50px 75px;
}

Kokeile itse

Jos padding Ominaisuus asetettu kahdella arvolla:

  • padding: 25px 50px;
    • Ylä- ja alainen sisäinen reunaväli ovat 25px
    • Oikea ja vasen sisäinen reunaväli ovat 50px

Esimerkki

Käytä padding-ominaisuutta, joka on asetettu kahdella arvolla:

div {
  padding: 25px 50px;
}

Kokeile itse

Jos padding Ominaisuus asetettu yhdellä arvolla:

  • padding: 25px;
    • Kaikki neljä sisäistä reunaväliä ovat 25px

Esimerkki

Käytä padding-ominaisuutta, joka on asetettu yhdellä arvolla:

div {
  padding: 25px;
}

Kokeile itse

Sisäiset reunaväleet ja elementin leveys

CSS width Ominaisuus määrittelee elementin sisällön alueen leveys.

Siksi, jos elementillä on määritelty leveys, lisättävät sisäiset reunavälit lisätään elementin kokonaisleveyteen. Tämä on yleensä ei-toivottu tulos.

Esimerkki

Tässä, <div>-elementin leveys on 300px. Mutta <div>-elementin todellinen leveys on 350px (300px + vasen sisäinen reunaväli 25px + oikea sisäinen reunaväli 25px):

div {
  width: 300px;
  padding: 25px;
}

Kokeile itse

Jos haluat pitää leveyden 300px:ää, riippumatta täytteestä, voit käyttää: box-sizing Ominaisuus. Tämä tarkoittaa, että elementti säilyttää leveytensä. Jos lisäät sisäisiä reunavälejä, käytettävissä oleva sisältötila vähenee.

Esimerkki

Käytä box-sizing-ominaisuutta pitääksesi leveyden 300px:ää, riippumatta täytteestä:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Kokeile itse

Lisää esimerkkejä

Aseta vasen sisäinen reunaväli
Tämä esimerkki näyttää, miten voit asettaa <p>-elementin vasen sisäisen reunavälin.
Aseta oikea sisäinen reunaväli
Tämä esimerkki näyttää, miten voit asettaa <p>-elementin oikean sisäisen reunavälin.
Aseta yläinen sisäinen reunaväli
Tämä esimerkki näyttää, miten voit asettaa <p>-elementin yläisen sisäisen reunavälin.
Aseta alainen sisäinen reunaväli
Tämä esimerkki näyttää, miten voit asettaa <p>-elementin alaisen sisäisen reunavälin.

Kaikki CSS:n sisäiset reunavälien ominaisuudet

Ominaisuus Kuvaus
padding Yksinkertaistettu ominaisuus, jolla asetetaan kaikki sisäisten reunavälien ominaisuudet yhdessä lauseessa.
padding-bottom Aseta elementin alainen sisäinen reunaväli.
padding-left Aseta elementin vasen sisäinen reunaväli.
padding-right Aseta elementin oikea sisäpiirustus.
padding-top Aseta elementin yläsisäpiirustus.

Laajennettu lukeminen

Lisäkirjat:Käppymalli: CSS sisäpiirustus