Tailwind'de Tek Tarafa Kenar Boşluğu Nasıl Eklenir?

Tailwind De Tek Tarafa Kenar Boslugu Nasil Eklenir



Tailwind CSS'de bir marj Belirli bir elemanın etrafındaki aralığı kontrol etmek için kullanılır. Uygulanan öğe ile onu çevreleyen öğeler arasına boşluk ekler. Tailwind CSS, kullanıcıların istenen öğelerin etrafındaki boşluğu özelleştirmesine izin veren bir dizi kenar boşluğu yardımcı programı ve kenar boşluğu değeri sağlar. Ayrıca kullanıcılar, belirli bir öğenin üstü, altı, solu veya sağı gibi tek bir kenara kenar boşluğu ekleyebilir.

Bu blog, Tailwind CSS'de bir öğenin tek bir tarafına kenar boşluğu eklemek için örnekler gösterecek.







Tailwind'de Tek Tarafa Kenar Boşluğu Nasıl Eklenir?

Tailwind'de bir öğenin tek bir tarafına kenar boşluğu 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 Kenar Boşluğu Ekleyin





Bu örnekte, “ mt-14 ' yardımcı program sınıfı '

üstüne 14 birim kenar boşluğu eklemek için ” öğesi:

< vücut >

< div sınıf = 'h-96 mt-14 bg-mor-500' >

< P sınıf = 'text-5xl metin merkezi' > kenar boşluğu içinde Kuyruk Rüzgarı CSS'si P >

div >

vücut >


Burada:



    • h-96 ” sınıfı,
      kabının yüksekliğini 96 birime ayarlar.
    • mt-14 ” sınıfı, kabın üst kısmına 14 birim kenar boşluğu uygular.
    • bg-mor-500 ” sınıfı, mor rengi kabın arka planına ayarlar.

Çıktı


Yukarıdaki çıktı, kenar boşluğunun kabın üstüne eklendiğini gösterir.

Örnek 2: Bir Öğenin Altına Kenar Boşluğu Ekleyin

Bu örnekte, “ mb-14 ' sınıfında '

Altına 14 birim kenar boşluğu eklemek için ” öğesi:

< vücut >

< div sınıf = 'h-96 mb-14 bg-mor-500' >

< P sınıf = 'text-5xl metin merkezi' > kenar boşluğu içinde Kuyruk Rüzgarı CSS'si P >

div >

vücut >


Çıktı


Kenar boşluğunun kabın dibine eklendiği görülebilir.

Örnek 3: Bir Öğenin Soluna Kenar Boşluğu Ekleyin

Bu örnekte, “ ml-14 ' sınıfında '

” öğesi soluna 14 birim kenar boşluğu eklemek için:

< vücut >

< div sınıf = 'h-96 ml-14 bg-mor-500' >

< P sınıf = 'text-5xl metin merkezi' > kenar boşluğu içinde Kuyruk Rüzgarı CSS'si P >

div >

vücut >


Çıktı


Yukarıdaki çıktı, kenar boşluğunun kapsayıcı öğenin soluna eklendiğini gösterir.

Örnek 4: Bir Elemanın Sağına Kenar Boşluğu Ekleyin

Bu örnekte, “ bay-14 ' sınıfında '

Sağına 14 birim kenar boşluğu eklemek için ” öğesi:

< vücut >

< div sınıf = 'h-96 mr-14 bg-mor-500' >

< P sınıf = 'text-5xl metin merkezi' > kenar boşluğu içinde Kuyruk Rüzgarı CSS'si P >

div >

vücut >


Çıktı


Gördüğünüz gibi kenar boşluğu, kabın sağına verimli bir şekilde eklendi.

Çözüm

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