Style padding ominaisuus

Määrittely ja käyttö

padding Ominaisuus asettaa tai palauttaa elementin sisennyksen.

Tämä ominaisuus voi käyttää yhtä, kaksi, kolmea tai neljää arvoa:

margin-ominaisuus ja Padding-ominaisuus Kaikki lisäävät tilaa elementin ympärille. Mutta erona on, että margin lisää tilaa reunan ympärille, kun taas padding lisää tilaa elementin reunan sisällä

  • Yksi arvo, esimerkiksi: div {padding: 50px} - kaikki neljä reunaa ovat 50px sisennetyt
  • Kaksi arvoa, esimerkiksi: div {padding: 50px 10px} - ylä- ja alavälimarginaali on 50px, vasen ja oikea välimarginaali on 10px
  • Kolme arvoa, esimerkiksi: div {padding: 50px 10px 20px} - yläsisäinen reunus on 50px, molemmat sivureunat ovat 10px, alapuolella oleva sisäinen reunus on 20px
  • Neljä arvoa, esimerkiksi: div {padding: 50px 10px 20px 30px} - yläsisäinen reunus on 50px, oikea sisäinen reunus on 10px, alapuolella oleva sisäinen reunus on 20px, vasen sisäinen reunus on 30px

Katso myös:

CSS oppitunti:CSS sisäpuolinen tyyny

CSS viittausoppikirja:Padding-ominaisuus

Esimerkki

Esimerkki 1

Aseta <div> -elementin sisäinen reunus:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

Kokeile itse

Esimerkki 2

Muuta <div> -elementin kaikkien neljän reunan sisäinen reunus "25px":

document.getElementById("myDiv").style.padding = "25px";

Kokeile itse

Esimerkki 3

Palauta <div> -elementin sisäinen reunus:

alert(document.getElementById("myDiv").style.padding);

Kokeile itse

Esimerkki 4

margin- ja padding-ominaisuuksien ero:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Kokeile itse

Syntaksi

Palauta padding-ominaisuus:

object.style.padding

Aseta padding-ominaisuus:

object.style.padding = "%|length|initial|inherit"

Ominaisuuden arvo

Arvo Kuvaus
% Määritä sisäinen reunus vanhemman elementin leveyden prosentteina.
length Määritä sisäinen reunus pituusyksiköillä.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso initial。
inherit Perii tämän ominaisuuden vanhemmalta elementiltä. Katso inherit。

Tekninen yksityiskohta

Oletusarvo: 0
Palautusarvo: Merkkijono, joka ilmaisee elementin sisäisen reunan.
CSS versio: CSS1

Selain tukee

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki