Tailwind CSS'de dolgu, belirli öğenin içeriği ile sınırları arasına boşluk eklemek için kullanılır. Öğenin içine ekstra boşluk ekler. Tailwind CSS, kullanıcıların istenen öğelerin aralığını özelleştirmesine izin veren bir dizi dolgu aracı ve dolgu değeri sağlar. Ayrıca kullanıcılar, belirli bir öğenin üstü, altı, solu veya sağı gibi tek bir tarafa dolgu ekleyebilir.
Bu blog, Tailwind CSS'de bir öğenin tek bir tarafına dolgu eklemeye yönelik örnekleri gösterecek.
Tailwind'de Tek Tarafa Dolgu Nasıl Eklenir?
Tailwind'de bir öğenin tek bir tarafına dolgu eklemek için aşağıdaki yardımcı program sınıfları kullanılabilir:
Daha iyi anlamak için aşağıda verilen örnekleri inceleyin.
Örnek 1: Bir Elemanın Tepesine Dolgu Ekleme
Bu örnekte, “ nokta-10 ' yardımcı program sınıfı ' Örnek 2: Bir Öğenin Altına Dolgu Ekleme Bu örnekte, “ pb-10 ' sınıfında ' Örnek 3: Bir Elemanın Sağına Dolgu Ekleme Bu örnekte, “ pr-10 ' sınıfında ' Örnek 4: Bir Elemanın Soluna Dolgu Ekleme Bu örnekte, “ pl-10 ' sınıfında ' Tailwind'de bir öğenin tek bir tarafına dolgu eklemek için çeşitli yardımcı sınıflar kullanılabilir, örneğin ' pl-
< div sınıf = 'bg-pembe-600 pt-10 w-maks' >
Dolgu malzemesi içinde Kuyruk Rüzgarı CSS'si
div >
vücut >
Çıktı
Yukarıdaki çıktı, dolgunun kabın üstüne eklendiğini gösterir.
< div sınıf = 'bg-pembe-600 pb-10 w-maks' >
Dolgu malzemesi içinde Kuyruk Rüzgarı CSS'si
div >
vücut >
Çıktı
Dolgunun kabın dibine eklendiği görülebilir.
< div sınıf = 'bg-pembe-600 pr-10 w-maks' >
Dolgu malzemesi içinde Kuyruk Rüzgarı CSS'si
div >
vücut >
Çıktı
Yukarıdaki çıktı, dolgunun kapsayıcı elemanın sağına eklendiğini gösterir.
< div sınıf = 'bg-pembe-600 pl-10 w-maks' >
Dolgu malzemesi içinde Kuyruk Rüzgarı CSS'si
div >
vücut >
Çıktı
Konteynerin soluna dolgu eklendiği görülmektedir. Çözüm