CSS padding 属性

Pagsasaalang-alang at paggamit

Ang maikling katangian ng padding ay nagtatakda ng lahat ng alinlangan ng spasyong loob sa isang pahayag.

Paliwanag

Ang maikling katangian na ito ay nagtatakda ng lapad ng lahat ng alinlangan ng spasyong loob ng elemento, o nagtatakda ng lapad ng alinlangan ng spasyong loob ng bawat gilid. Ang alinlangan ng spasyong loob na itinakda sa mga inlayang non-replacement na elemento ay hindi makakaapekto sa pagtutulak ng antas ng pagtalataas; kaya, kung ang isang elemento ay may alinlangan ng spasyong loob at background, maaaring umabot sa ibang talataas, maaaring din magkakaroon ng pagkalabag sa ibang nilalaman. Ang background ng elemento ay umabot sa kabila ng alinlangan ng spasyong loob. Hindi pinapayagan ang pagtatakda ng negatibong halaga ng gilid.

Komento:Hindi pinapayagan ang mga negatibong halaga.

Halimbawa 1

padding:10px 5px 15px 20px;
  • Ang itaas ng alinlangan ng spasyong loob ay 10px
  • Ang kanang alinlangan ng spasyong loob ay 5px
  • Ang baba ng alinlangan ng spasyong loob ay 15px
  • Ang batahang alinlangan ng spasyong loob ay 20px

Halimbawa 2

padding:10px 5px 15px;
  • Ang itaas ng alinlangan ng spasyong loob ay 10px
  • Ang kanang at batahang alinlangan ng spasyong loob ay 5px
  • Ang baba ng alinlangan ng spasyong loob ay 15px

Halimbawa 3

padding:10px 5px;
  • Ang itaas at baba ng alinlangan ng spasyong loob ay 10px
  • Ang kanang at batahang alinlangan ng spasyong loob ay 5px

Halimbawa 4

padding:10px;
  • Ang lahat ng apat na alinlangan ng spasyong loob ay 10px

Tingnan din:

Tuturo sa CSS:CSS 内边距

Manwal ng HTML DOM:Katangian ng padding

Halimbawa

Itatayo ang apat na alinlangan ng spasyong loob ng elemento p:

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

Tutustusan ang sarili

Grammar ng CSS

padding: length|initial|inherit;

Halaga ng katangian

Halaga Paglalarawan
auto Ang browser ay magtutulak ng alinlangan ng spasyong loob.
length Nag-uusap ng alinlangan ng spasyong loob na nasa tiyak na yunit, tulad ng pixel, sentimetro, atbp. Ang default na halaga ay 0px.
% Nag-uusap ng alinlangan ng spasyong loob na nasa porsyento ng lapad ng magulang na elemento.
inherit Nag-uusap ng pag-inherita ng alinlangan ng spasyong loob mula sa magulang na elemento.

Detalye ng teknolohiya

Default na halaga: 0
Inherency: hindi
Bersyon: CSS1
Grammar ng JavaScript: object.style.padding="10px 5px"

TIY Halimbawa

Lahat ng alinlangan ng spasyong loob sa isang pahayag
Ang kasong ito ay nagtutuklas ng paggamit ng maikling katangian upang i-set ang lahat ng mga alinlangan ng spasyong loob sa isang pahayag, maaaring may isa hanggang apat na halaga.

Suporta ng browser

Ang mga numero sa talahanayan ay nagtatalaga ng unang bersyon ng browser na ganap na sumusuporta sa katangian.

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