CSS padding ominaisuus

Määrittely ja käyttö

padding-lyhennetty ominaisuus asettaa kaikki sisäiset marginit yhdessä lausekkeessa.

Kuvaus

Tämä lyhennetty ominaisuus asettaa elementin kaikkien sisäisten marginien leveyden tai asettaa jokaisen reunan sisäisten marginien leveyden. Linjasuuntaiset ei-hyväksytyt elementtien sisäiset marginit eivät vaikuta linjan korkeuden laskentaan; siksi, jos elementillä on sekä sisäisiä margineja että tausta, se voi näyttää visuaalisesti ulottuvan muihin riveihin ja mahdollisesti myös osuvan muiden sisällöiden kanssa. Elementin tausta ulottuu sisäisten marginien läpi. Negatiivisia reunamargina-arvoja ei saa määrittää.

Huomautus:Ei sallita negatiivisia arvoja.

Esimerkki 1

padding:10px 5px 15px 20px;
  • Yläpuolinen sisäinen margina on 10px
  • Oikea sisäinen margina on 5px
  • Alapuolinen sisäinen margina on 15px
  • Vasen sisäinen margina on 20px

Esimerkki 2

padding:10px 5px 15px;
  • Yläpuolinen sisäinen margina on 10px
  • Oikea ja vasen sisäinen margina ovat 5px
  • Alapuolinen sisäinen margina on 15px

Esimerkki 3

padding:10px 5px;
  • Ylä- ja alapuoliset sisäiset marginit ovat 10px
  • Oikea ja vasen sisäinen margina ovat 5px

Esimerkki 4

padding:10px;
  • Kaikki neljä sisäistä marginaa ovat 10px

Katso myös:

CSS-opas:CSS sisätila

HTML DOM -viittausopas:padding-ominaisuus

Esimerkki

Aseta p-elementin neljä sisäistä marginaa:

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

Kokeile itse

CSS-kieli

padding: length|initial|inherit;

Ominaisuusarvo

Arvo Kuvaus
auto Selain laskee sisäiset marginit.
length Määritellään sisäisten marginien arvo tarkalla yksiköllä, kuten pikseleillä, senttimetreillä jne. Oletusarvo on 0px.
% Määritellään sisäisten marginien leveys isäelementin leveyden prosentteina.
inherit Määritellään, että sisäiset marginit tulisi periä isältä elementiltä.

Tekninen yksityiskohta

Oletusarvo: 0
Perintä: ei
Versio: CSS1
JavaScript-kieli: object.style.padding="10px 5px"

TIY-esimerkki

Kaikki sisäiset marginit yhdessä lausekkeessa
Tämä esimerkki näyttää, kuinka kaikkia sisäisiä margineja voidaan asettaa yhdessä lausekkeessa, mikä voi olla yhdestä neljään arvoon.

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5