padding
padding özelliği, elementin içeriği ile kenarlığı arasındaki dolgu genişliğini belirler.
DOM Sözdizimi
element.style.padding = "aralik"
CSS Sözdizimi
padding: aralik
| aralik | auto değeri, yüzde değeri ve CSS Ölçü Birimlerinden dört taneye kadar değer alabilir. Dolgu genişliği, auto değerinde otomatik belirlenir. Yüzde değerinde elementin ana elementinin genişliği ile oranlanarak belirlenir. Ayrıca, CSS Ölçü Birimleri ile net bir değer olarak belirtilebilir. |
CSS padding özelliğine 4 taneye kadar farklı değer atanabilir. Atanan değer sayısına göre her kenarın dolgu genişliği aşağıda açıklandığı şekilde belirlenir.
- Bir değer belirtilirse, dört kenar dolgusu için uygulanır.
- İki değer belirtilirse, ilk değer üst (top) ve alt (bottom), ikinci değer sol (left) ve sağ (right) dolgu genişliklerini belirler.
- Üç değer belirtilirse, ilk değer üst (top), ikinci değer sol (left) ve sağ (right), üçüncü değer ise alt (bottom) dolgu genişliklerini belirler.
- Dört değer belirtilirse, bunlar sırasıyla üst (top), sağ (right), alt (bottom) ve sol (left) dolgu genişliklerini belirler.
CSS padding Değerlerinin Gösterimi
| padding: | Canlı Sonuç | Açıklama |
|---|
| 10px |
|
- Üst : 10px
- Sağ : 10px
- Alt : 10px
- Sol : 10px
|
| 10px 20px |
|
- Üst : 10px
- Sağ : 20px
- Alt : 10px
- Sol : 20px
|
| 10px 20px 30px |
|
- Üst : 10px
- Sağ : 20px
- Alt : 30px
- Sol : 20px
|
| 10px 20px 30px 40px |
|
- Üst : 10px
- Sağ : 20px
- Alt : 30px
- Sol : 40px
|
|