Responsive Tasarımlarda Boşluk ve Dolgu Nasıl Yönetilir?

Bu pratik kılavuz, duyarlı tasarımlarda aralık ve dolguyu yönetme yöntemini gösterecektir.

Responsive Tasarımlarda Boşluk ve Dolgu Nasıl Yönetilir?

Duyarlı tasarımlarda dolgu ve aralıklar CSS kullanılarak yönetilebilir. Aşağıda aralık ve dolgu yönetiminin pratik bir gösterimi verilmiştir.

Adım 1: Bir HTML Yapısı Oluşturun

İlk olarak, bir HTML yapısı ve bunun içinde bir miktar metin oluşturun.

Ve

Etiketler:

< vücut >
< h2 > Duyarlı CSS Dolgusu ve Aralığı < / h2 >
< div > Bu CSS öğesinin dolgusu 80 piksel, aralığı ise 40 pikseldir. < / div >
< / vücut >

2. Adım: CSS'yi uygulayın

---

---

Şimdi CSS'yi uygulayalım.

etiket. Öncelikle “ dolgu malzemesi ” özellik değerini “ 80 piksel ” elemanın etrafında boşluk yaratmak için. Daha sonra “ marj ” özellik değerini “ 40 piksel ”ve sınırın dışındaki öğelerin etrafında boşluk yaratın. Son olarak “ sınır ” özelliğini kullanın ve kenarlık oluşturmak için kenarlığı ve rengi belirtin:

div {
dolgu malzemesi : 80 piksel ;
marj : 40 piksel ;
sınır : 1 piksel sağlam yeşil ;
}

Yukarıdaki çıktı, aralık ve dolgunun uygulandığını doğrular.

Tarayıcı penceresini daraltarak yanıt verip vermediğini kontrol edelim:

Pencerenin daraltılmasıyla içerik duyarlı bir şekilde davrandı; bu da uygulanan dolgu ve aralığın duyarlı olduğunu doğruladı.

Çözüm

Duyarlı tasarımlarda aralık ve dolguyu yönetmek için CSS özellikleri mevcuttur. Duyarlı tasarıma dolgu eklemek için “ dolgu malzemesi ' mülk. Benzer şekilde duyarlı tasarımda '' kullanılarak boşluk eklenebilir. marj ' mülk. Bu yazı, kullanıcılara duyarlı tasarımlarda aralık ve dolguyu yönetmeye yönelik bir çözüm sunmuştur.