ii-master

Kenar ic Boslugu padding Ozellikleri

Kenar İç Boşluğu (padding) Özellikleri
Padding içerik alanı ile kenarlık arasındaki alandır.

Her yön için (yukarı-sağ-aşağı-sol) ayrı tanımlamalar yapıldığı gibi (padding-top, padding-right, padding-bottom, padding-left) tek bir özellik ilede (padding) tanımlama yapılabilir.



Sırasıyla bu özelliklerimi görelim;

Üst kenar iç boşluğu (padding-top)
padding-top içerik alanı ile üst kenar çizgisi arasındaki mesafeyi belirler.

Örnek kullanımı aşağıdaki gibidir;

p {padding-top: 30px}

Sağ kenar iç boşluğu (padding-right)
padding-right içerik alanı ile sağ kenar çizgisi arasındaki mesafeyi belirler.

Örnek kullanımı aşağıdaki gibidir;

p  {padding-right: 10px}

Alt kenar iç boşluğu (padding-bottom)
padding-bottom içerik alanı ile alt kenar çizgisi arasındaki mesafeyi belirler.

Örnek kullanımı aşağıdaki gibidir;

p {margin-bottom: 14px}

Sol kenar iç boşluğu (padding-left)
padding-left içerik alanı ile sol kenar çizgisi arasındaki mesafeyi belirler.

Örnek kullanımı aşağıdaki gibidir;

div {padding-left: 30px}

Kenar iç boşluğu (padding)
padding özelliği tek bir seferde elemanın kenar iç boşluklarını tanımlamamızı sağlar.. Sırasıyla 1, 2 ya da 4 değer tanımlanır.. Bu tanımlamalar saat yönüyle bağdaşır.

1 değer tanımlama : Tüm kenarlara vereceğimiz değer aynı ise tek bir tanımlama yeterli olacaktır.

div {padding: 10px}

2 değer tanımlama : Üst-Alt ve Sağ-Sol kenarlarına vereceğimiz kenar iç boşluğu aynı ise 2 değer tanımlanır. İlk değer üst ve alt için ikinci değer sağ ve sol içindir.

div {padding: 10px 20px}

4 değer tanımlama : Her kenar için özelliğimiz olmasına rağmen tek bir özellikte bunu yazmak istersek 4 değer tanımlarız. Saat yönüne göre sırasıyla üst - sağ - alt - sol değerleridir.. 

div {padding: 5px 10px 15px 20px}