Style padding Attribute

Paglilinaw at Paggamit

Padding Ang katangian na ito ay nagtatakda o binabalik ng padin ng elemento.

Ang katangian na ito ay maaaring gumamit ng isang hanggang apat na halaga:

Atributo ng margin At Katangian ng padding Lahat ay nasa paligid ng elemento. Subalit, ang pagkakaiba nito ay ang margin ay naglalagay ng espasyo sa paligid ng border, habang ang padding ay naglalagay ng espasyo sa loob ng border ng elemento.

  • Isang halaga, halimbawa: div {padding: 50px} - ang lahat ng apat na bahagi ay magiging may 50px na padin
  • Dalawang halaga, halimbawa: div {padding: 50px 10px} - ang ibabaw at ilalim na padin at kanan at kaliwang padin ay magiging 50px, ang 10px ay magiging padin sa kanan at kaliwan
  • Tatlong halimbawa, tulad ng: div {padding: 50px 10px 20px} - ang panghahambing sa itaas ay 50px, ang panghahambing sa kanan at sa kaliwa ay 10px, ang panghahambing sa ilalim ay 20px
  • Apat na halimbawa, tulad ng: div {padding: 50px 10px 20px 30px} - ang panghahambing sa itaas at sa loob ay 50px, ang panghahambing sa kanan at sa kaliwa ay 10px, ang panghahambing sa ilalim ay 20px, ang panghahambing sa kanan ay 30px

Paalam din:

Tuturo ng CSS:CSS Inner Padding

Manwal ng CSS:Katangian ng padding

Sample

Halimbawa 1

I-set ang panghahambing sa loob ng <div> elemento:

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

Subukan nang personal

Halimbawa 2

Ayusin ang panghahambing sa loob ng lahat ng apat na gilid ng <div> elemento sa "25px":

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

Subukan nang personal

Halimbawa 3

Ibabalik ang panghahambing sa loob ng <div> elemento:

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

Subukan nang personal

Halimbawa 4

Pagkakaiba ng katangian ng margin at padding:

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

Subukan nang personal

Grammar

Ibabalik ang katangian ng padding:

object.style.padding

I-set ang katangian ng padding:

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

Halimbawa ng katangian

Halimbawa ng paglalagay Paglalarawan
% Tinukoy ng porsyento ng haba ng magulang na elemento ang panghahambing sa loob.
length Tinukoy ng haba ng unay ang panghahambing sa loob.
initial I-set ang katangian na ito sa kanyang default na halimbawa. Tingnan ang initial。
inherit Inuminan ng katangian na ito mula sa magulang na elemento. Tingnan ang inherit。

Detalye ng teknolohiya

Default na halimbawa: 0
Halimbawa ng pagbabalik: String, na naglalarawan ng panghahambing sa loob ng elemento.
Versyon ng CSS： CSS1

Browser sumasang-ayon

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support