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ö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 ' Tailwind'deki bir öğeye dikey dolgu eklemek için ' py- Sözdizimi Örnek: Bir HTML Öğesine Dikey Dolgu Uygulamak Bu örnekte, “ py-20 ' yardımcı sınıf ile ' Tailwind'de yatay ve dikey dolguyu eklemek için ' px-
< 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?
Burada 'py', 'y eksenini' veya 'dikey dolguyu' temsil eder.
< 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