CSS Dolgu Özellikleri
CSS padding özellikleri içerik etrafında boşluk oluşturmak için kullanılır.
padding özellikleri eleman içerik ve eleman sınırı arasında boşluk boyutunu ayarlamak.
Bu eleman 50px bir dolgu maddesi sunuyor.
CSS Dolgu
CSS padding özellikleri eleman içerik ve eleman sınırı arasında boşluk tanımlar.
Dolgu içerik etrafında bir alanı temizler (inside the border) bir elementin.
Note: dolgu elemanının arka plan rengi etkilenir!
CSS ile, dolgu üzerinde tam kontrole sahip. Bir elementin her tarafı için dolgu ayarlamak için CSS özelliklerini vardır (top, right, bottom, and left) .
Dolgu - Bireysel Sides
CSS bir eleman her bir tarafı için dolgu belirlemek için özelliklere sahiptir:
-
padding-top -
padding-right -
padding-bottom -
padding-left
Tüm dolgu özellikleri şu değerlere sahip olabilir:
- uzunluk - bir dolgu belirtir px, pt, cm , vb
- % - ihtiva eden elemanın genişliğinin% olarak doldurulması belirtilmiş
- miras - dolgu üst öğesinden miras gerektiğini belirtir
Aşağıdaki örnekte dört taraf için farklı dolgu setleri <p> elemanı:
Örnek
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
} Kendin dene " Dolgu - Steno Mülkiyet
kodunu kısaltmak için, bir mülkte tüm dolgu özelliklerini belirtmek mümkündür.
padding özelliği şu bireysel dolgu özellikleri için kullanılan bir kestirme niteliktir:
-
padding-top -
padding-right -
padding-bottom -
padding-left
nasıl çalıştığını Yani, burada:
Eğer padding özelliği dört değer vardır:
- padding: 25px 50px 75px 100px;
- Üst dolgu 25px olduğunu
- Doğru dolgu 50px olduğunu
- alt dolgu 75px olduğunu
- Sol dolgu 100px olduğunu
Eğer padding özelliği üç değer vardır:
- padding: 25px 50px 75px;
- Üst dolgu 25px olduğunu
- sağ ve sol kenarların, 50px vardır
- alt dolgu 75px olduğunu
Eğer padding özelliği iki değer vardır:
- padding: 25px 50px;
- alt ve üst kenarların 25px vardır
- sağ ve sol kenarların, 50px vardır
Eğer padding özelliği bir değeri vardır:
- padding: 25px;
- Dört altlıkları 25px vardır
Diğer Örnekler
Tek bildiriminde tüm padding özellikleri
Bu örnek tek bildiriminde dolgu özelliklerinin hepsi için kullanılan bir kestirme özelliği gösteren, bir ila dört değerlere sahip olabilir.
Sol dolgu ayarlayın
Bu örnek, bir sol dolguya ayarlama gösterilmiştir <p> elemanı.
Sağ dolgu ayarlayın
Bu örnek, bir sağ dolgu ayarlama gösterilmiştir <p> elemanı.
Üst dolgu ayarlayın
Bu örnek, bir üst dolgu ayarlama gösterilmiştir <p> elemanı.
Alt dolgu ayarlayın
Bu örnek, bir alt dolgu ayarlama gösterilmiştir <p> elemanı.
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 »
Tüm CSS Dolgu Özellikleri
| özellik | Açıklama |
|---|---|
| padding | tek bildiriminde tüm dolgu özelliklerini ayarlamak için bir stenografi özelliği |
| padding-bottom | Bir elemanın alt dolgu ayarlar |
| padding-left | Bir elemanın sol dolguya ayarlar |
| padding-right | Bir elemanın sağ dolgu ayarlar |
| padding-top | Bir elemanın üst dolgu ayarlar |