Tailwind'de Tek Tarafa Dolgu Nasıl Eklenir?

Tailwind De Tek Tarafa Dolgu Nasil Eklenir



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ı '

” öğesinin üstüne 10 birim dolgu eklemek için:

< vücut >

< 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.

Örnek 2: Bir Öğenin Altına Dolgu Ekleme

Bu örnekte, “ pb-10 ' sınıfında '

Altına 10 birim dolgu eklemek için ” öğesi:

< vücut >

< 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.

Örnek 3: Bir Elemanın Sağına Dolgu Ekleme

Bu örnekte, “ pr-10 ' sınıfında '

Sağına 10 birim dolgu eklemek için ” öğesi:

< vücut >

< 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.

Örnek 4: Bir Elemanın Soluna Dolgu Ekleme

Bu örnekte, “ pl-10 ' sınıfında '

Soluna 10 birim dolgu eklemek için ” öğesi:

< vücut >

< 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

Tailwind'de bir öğenin tek bir tarafına dolgu eklemek için çeşitli yardımcı sınıflar kullanılabilir, örneğin ' pl- ”, “ pr- ”, “ pt- ', Ve ' pb- ”. Bu sınıflar, belirli bir öğenin sırasıyla sol, sağ, üst ve alt taraflarına dolgu ekler. Kullanıcılar dolgu boyutu için farklı değerler belirtebilir. Bu blog, Tailwind CSS'de bir öğenin tek bir tarafına dolgu eklemek için örnekler göstermiştir.