Tailwind'de Yatay ve Dikey Dolgu Nasıl Eklenir?

Tailwind De Yatay Ve Dikey Dolgu Nasil Eklenir



Tailwind CSS'de, dolgu malzemesi belirli öğenin içeriği ile sınırı arasındaki boşluktur. yatay dolgu öğenin sol ve sağ tarafındaki boşluktur, oysa dikey dolgu bir elemanın üstündeki ve altındaki boşluktur. Tailwind, istenen öğelere yatay veya dikey dolgu eklemek için çeşitli yardımcı sınıflar sunar.

Bu makale şunları gösterecektir:







Tailwind'de Yatay Dolgu Nasıl Eklenir?

Tailwind'de bir öğeye yatay dolgu eklemek için, HTML programında istenen öğeyle “px-” sınıfı kullanılır. Kullanıcılar dolgu boyutu için farklı değerler belirtebilir. Bu sınıf, x ekseni boyunca, yani öğenin hem sol hem de sağ taraflarına dolgu ekler.



Sözdizimi



< eleman sınıf = 'px-0 ...' > ... eleman >


Burada 'px', 'x eksenini' veya 'yatay dolguyu' temsil eder.





Örnek: Bir HTML Öğesine Yatay Dolgu Uygulamak

Bu örnekte, “ piksel-20 ' yardımcı sınıf ile '

” öğesi, ona yatay dolgu eklemek için:



< vücut >

< div sınıf = 'bg-pink-600 px-20 w-max' >
Dolgu malzemesi içinde Kuyruk Rüzgarı CSS'si
div >

vücut >


Çıktı


Yukarıdaki çıktı, kabın sol ve sağ taraflarına yapılan dolguyu gösterir. Bu, kapsayıcı öğeye yatay dolgunun başarıyla uygulandığını gösterir.

Tailwind'de Dikey Dolgu Nasıl Eklenir?

Tailwind'deki bir öğeye dikey dolgu eklemek için ' py- ” HTML programındaki belirli öğeye sahip yardımcı program sınıfı. Bu sınıf, y ekseni boyunca, yani öğenin hem üst hem de alt taraflarına dolgu ekler.

Sözdizimi

< eleman sınıf = 'py-0 ...' > ... eleman >


Burada 'py', 'y eksenini' veya 'dikey dolguyu' temsil eder.

Örnek: Bir HTML Öğesine Dikey Dolgu Uygulamak

Bu örnekte, “ py-20 ' yardımcı sınıf ile '

” öğesi, ona dikey dolgu eklemek için:

< vücut >

< div sınıf = 'bg-pembe-600 py-20 w-maks' >
Dolgu malzemesi içinde Kuyruk Rüzgarı CSS'si
div >

vücut >


Çıktı


Yukarıdaki çıktı, kabın üst ve alt taraflarına yapılan dolguyu gösterir. Bu, dikey dolgunun konteyner elemanına etkili bir şekilde uygulandığını gösterir.

Çözüm

Tailwind'de yatay ve dikey dolguyu eklemek için ' px- ' Ve ' py- ”fayda sınıfları, sırasıyla HTML programında istenen öğelerle birlikte kullanılır. Kullanıcılar, bir öğenin soluna ve sağına veya üstüne ve altına dolgu uygulamak için farklı değerler belirleyebilir. Bu makale, Tailwind'de yatay ve dikey dolgu uygulamak için eksiksiz yöntemi göstermektedir.