Box Model: CSS Padpad

Ang padpad sa loob ng elemento ay nasa pagitan ng border at content area. Ang pinakasimpleng attribute na kontrolin ang lugar na ito ay ang padding attribute.

Ang atributo ng padding sa CSS ay nagtutukoy sa bakanteng lugar sa pagitan ng border ng elemento at ng nilalaman ng elemento.

Ating Ating ng Padding ng CSS

Ang atributo ng padding sa CSS ay nagtutukoy sa panloob na layo ng elemento. Ang atributo ng padding ay tatanggapin ang halaga ng haba o porsiyento, ngunit hindi pinapayagan ang negatibong halaga.

Halimbawa, kung gusto mong magkaroon ng 10 pixel na panloob na layo sa bawat gilid ng lahat ng elemento h1, kailangan lang itong gawin:

h1 {padding: 10px;}

Maaari mo ring itakda ang bawat gilid ng panloob na layo ayon sa pagkakasunod-sunod ng itaas, kanan, pababa, at kaliwang, at bawat gilid ay maaaring gamitin iba't ibang yunit o porsiyento:

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

Atributo ng mag-isa na panloob na layo

Ginagamit din ang sumusunod na apat na magkakahiwalay na atributo upang itakda ang itaas, kanan, pababa, at kaliwang panloob na layo:

Maaaring na-iisip mo na, ang sumusunod na patakaran ay magiging kapareho sa epekto ng nakaraang maikling patakaran:

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

Porsiyento na halaga ng panloob na layo

Bilang pinag-uusapan, maaaring itakda ang halaga ng porsiyento para sa panloob na layo ng elemento. Ang halaga ng porsiyento ay itinuturing ayon sa lapad ng magulang na elemento, katulad ng panlabas na layo. Kaya, kapag nagbago ang lapad ng magulang na elemento, sila ay magiging pagbabago din.

Ang sumusunod na patakaran ang nagtatakda ng panloob na layo ng paragrapo ay 10% ng lapad ng magulang na elemento:

p {padding: 10%;}

Halimbawa: Kung ang magulang ng isang paragrapo ay ang elemento div, ang panloob na layo ay dapat ayon sa lapad ng div.

<div style="width: 200px;">
<p>Ang paragrapong ito ay nasa loob ng isang DIV na may lapad na 200 pixels.</p>
</div>

Babala:Ang panloob na layo ng itaas at pababa ay magkapareho sa panloob na layo ng kaliwang at kanang bahagi; halimbawa, ang porsiyento ng panloob na layo ng itaas at pababa ay itakda ayon sa lapad ng magulang na elemento, hindi sa taas.

Mga halimbawa ng panloob na layo sa CSS:

Lahat ng panloob na layo atributo sa isang deklarasyon
Ito ay nagtuturo kung paano gamitin ang maikling atributo upang itakda ang lahat ng panloob na layo atributo sa isang deklarasyon, maaaring may isang hanggang apat na halaga.
Itakda ang pababa na panloob na layo 1
Ito ay nagtuturo kung paano gamitin ang halaga ng sentimetro upang itakda ang pababa na panloob na layo ng cell.
Itakda ang pababa na panloob na layo 2
Ito ay nagtuturo kung paano gamitin ang halaga ng porsiyento upang itakda ang pababa na panloob na layo ng cell.
Itakda ang kaliwang panloob na layo 1
Ito ay nagtuturo kung paano gamitin ang halaga ng sentimetro upang itakda ang kaliwang panloob na layo ng cell.
Itakda ang kaliwang panloob na layo 2
Ito ay nagtuturo kung paano gamitin ang halaga ng porsiyento upang itakda ang kaliwang panloob na layo ng cell.
I-set ang kanang pangloob na padding 1
Ipinapakita ng halimbawa kung paano gamitin ang sentimetro ng halaga upang i-set ang kanang pangloob na padding ng cell.
I-set ang kanang pangloob na padding 2
Ipinapakita ng halimbawa kung paano gamitin ang porsyento ng halaga upang i-set ang kanang pangloob na padding ng cell.
I-set ang taas ng pangloob na padding 1
Ipinapakita ng halimbawa kung paano gamitin ang sentimetro ng halaga upang i-set ang taas ng pangloob na padding ng cell.
I-set ang taas ng pangloob na padding 2
Ipinapakita ng halimbawa kung paano gamitin ang porsyento ng halaga upang i-set ang taas ng pangloob na padding ng cell.

Ating Ating ng Pangloob na Padding ng CSS

Ating Ating Paglalarawan
padding Maliit na Ating Ating. Ginagamit upang iset ang lahat ng pangloob na padding ng elemento sa isang pahayag.
padding-bottom Iset ang ibaba ng pangloob na padding ng elemento.
padding-left Iset ang kaliwang pangloob na padding ng elemento.
padding-right Iset ang kanang pangloob na padding ng elemento.
padding-top Iset ang taas ng pangloob na padding ng elemento.