Käppimalli: CSS:n sisäinen marginaali

Elementin sisäinen marginaali sijaitsee reunan ja sisällön alueen välillä. Tämä alueen hallintaan käytettävin yksinkertaisin ominaisuus on padding-ominaisuus.

CSS padding-ominaisuus määrittää elementin reunan ja elementin sisällön välisen tyhjiön.]}

CSS padding-ominaisuus

CSS padding-ominaisuus määrittää elementin sisennyssuhteen. Padding-ominaisuus hyväksyy pituusarvot tai prosenttiosuudet, mutta ei negatiivisia arvoja.

Esimerkiksi, jos haluat, että kaikki h1-elementtien reunat ovat 10 kuvapistettä sisennyssuhteeltaan, riittää, että teet näin:

h1 {padding: 10px;}

Voit myös asettaa jokaisen reunan sisennyssuhteen ylös, oikealle, alas ja vasemmalle järjestyksessä, ja jokainen reuna voi käyttää eri yksikköjä tai prosenttiosuuksia:

h1 {padding: 10px 0.25em 2ex 20%;}

Yksittäiset sisennyssuhteen ominaisuudet

Myös seuraavilla neljällä erillisellä ominaisuudella voidaan asettaa ylä-, oikea-, alapuoli- ja vasemman sisennyssuhde:

Voit ehkä jo ajatellakin, että seuraava sääntö tuottaa täsmälleen saman tuloksen kuin yllä oleva lyhennetty sääntö:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Sisennyssuhteen prosenttiosuusarvot

Kuten aiemmin mainittiin, voidaan asettaa elementin sisennyssuhteen prosenttiosuus. Prosenttiosuus lasketaan suhteessa isäntäelementin leveys, kuten ulkoisen reunan tapauksessa. Siksi, jos isäntäelementin leveys muuttuu, ne muuttuvat myös.

Seuraava sääntö asettaa kappaleen sisennyssuhteen isäntäelementin leveysprosenttiosuuden 10%:

p {padding: 10%;}

Esimerkiksi: jos kappaleen isäntäelementti on div-elementti, sen sisennyssuhde lasketaan div:n leveys.

<div style="width: 200px;">
<p>Tämä kappale sisältyy DIV-tyyliin, jonka leveys on 200 kuvapistettä.</p>
</div>

Huomioitavaa:Ylä- ja alapuoliset sisennyssuhteen prosenttiosuudet ovat yhtä suuret kuin vasemman ja oikean sisennyssuhteen; eli ylä- ja alapuolisten sisennyssuhteen prosenttiosuudet asetetaan suhteessa isäntäelementin leveys, ei korkeus.

CSS sisennyssuhteen esimerkki:

Kaikki sisennyssuhteen ominaisuudet yhdessä lauseessa
Tämä esimerkki näyttää, kuinka lyhennetyllä ominaisuudella voidaan asettaa kaikki sisennyssuhteen ominaisuudet yhdessä lauseessa, voi olla yksi至 neljä arvoa.
Aseta alapuolisen reunan sisennyssuhde 1
Tämä esimerkki näyttää, kuinka senttimetrin arvoa käytetään solun alapuolisen reunan asettamiseen.
Aseta alapuolisen reunan sisennyssuhde 2
Tämä esimerkki näyttää, kuinka prosenttiosuus käytetään solun alapuolisen reunan asettamiseen.
Aseta vasemman sisäisen reunan sisennyssuhde 1
Tämä esimerkki näyttää, kuinka senttimetrin arvoa käytetään solun vasemman sisäisen reunan asettamiseen.
Aseta vasemman sisäisen reunan sisennyssuhde 2
Tämä esimerkki näyttää, kuinka prosenttiosuus käytetään solun vasemman sisäisen reunan asettamiseen.
Aseta oikea sisäpuoli 1
Tämä esimerkki näyttää, miten senttimetrillä voidaan asettaa solun oikea sisäpuoli.
Aseta oikea sisäpuoli 2
Tämä esimerkki näyttää, miten prosenttiosuudella voidaan asettaa solun oikea sisäpuoli.
Aseta yläsisäpuoli 1
Tämä esimerkki näyttää, miten senttimetrillä voidaan asettaa solun yläsisäpuoli.
Aseta yläsisäpuoli 2
Tämä esimerkki näyttää, miten prosenttiosuudella voidaan asettaa solun yläsisäpuoli.

CSS sisäpuoli ominaisuus

Ominaisuus Kuvaus
padding Yhteenvetolausekeominaisuus. Toimii elementin kaikkien sisäpuolien asettamiseksi yhdessä lausekkeessa.
padding-bottom Aseta elementin alapuoli.
padding-left Aseta elementin vasen sisäpuoli.
padding-right Aseta elementin oikea sisäpuoli.
padding-top Aseta elementin yläsisäpuoli.