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ı ' Çıktı Örnek 2: Bir Öğenin Altına Kenar Boşluğu Ekleyin Bu örnekte, “ mb-14 ' sınıfında ' Örnek 3: Bir Öğenin Soluna Kenar Boşluğu Ekleyin Bu örnekte, “ ml-14 ' sınıfında ' Örnek 4: Bir Elemanın Sağına Kenar Boşluğu Ekleyin Bu örnekte, “ bay-14 ' sınıfında ' 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-
< 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:
Yukarıdaki çıktı, kenar boşluğunun kabın üstüne eklendiğini gösterir.
< 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.
< 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.
< 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