Daha önceki makalelerimde devamlı margin kelimesini kullandım ancak bu makaleyi yazarken karşıma margin(marj) yerine Türkçe kenar boşluğunu kullanabileceğimi gördüm. Bu makalede ve sonraki makalelerimde bu şekilde kullanacağım. Makalelerimi yazarken devamlı Türkçe kelimeler kullanmayı tercih ediyorum, ancak bazı kelimelerin karşılılarını bulmakta zorlanıyorum. Neyse asıl konuya geçelim.
Kenar boşluğu çökmesi nedir? Kenar boşluğu nasıl meydana gelir ve nasıl çözülür? Bu makalede bu sorulara cevap bulacağız.
Kenar boşluğu çökmesini W3C bitişik kenar boşluğu olarak tanımlar. İki veya daha fazla kutunun(sonraki bir nesne veya kutu olabilir)arasındaki boşluğun tek kenar boşluğu şeklinde görünmesidir.
Bu sorun aslında bir hata olarak kabul edilmemelidir Belkide CSS ile sayfa kodlarken karşılaştığımız ve farklı yöntemlerle çözdüğümüz bu soruna burada açıklık getirmeye çalışacağım.
Sorun tam olarak; iki veya daha fazla kutu arasında dikey kenar boşluğu(margin) değeri ataması yaptığımızda dikey kenar boşluklarının biri etki etmez biz sadece bir kenar boşluğunu görürüz. Buna kenar boşluğu çökmesi denir. Bu kenar boşluğu değerlerinden küçük olan çöker, büyük olanın değeri görünür. Kenar boşluğu çökmesi bir kaç farklı durumda meydana gelir. Bunları sırası ile inceleyelim.
Kenar boşluğu uygulanmış iki blok-level elementin dikey kenar boşluğunda bir çökme meydana gelir. Bir örnek yapalım.
Html kodu:
CSS kodu:
Bu kodu uyguladığımızda normalde aşağıdaki Resim-1′deki gibi bir görüntü elde etmemiz gerekirken, kodu çalıştırdığımızda Resim-2′deki görüntüyü alırız.
Resim -1 Olması gereken kenar boşluğu
Resim – 2 Görünen kenar boşluğu görünümü
Bir elemente ve içindeki elemente kenar boşluğu atadığımızda içte kalan elementin kenar boşlukları kaybolacaktır. Bir uygulama yapalım:
Html kodu yazalım:
Örnekte gördüğümüz gibi paragrafın kenar boşluk değerleri görünmemektedir. Sadece dıştaki kapsul nesnesinin üst ve alt kenar boşlukları etki etmektedir.
Resim -1 Görünen kenar boşluğu
Resim – 2 Olması gereken kenar boşluğu
Çözüm: Bu tip kenar boşluğu çökmelerinde 1px’lik bir padding eklersek ve paragrafın kenar boşluk değerini de 1px azaltırsak sorun çözülür. Kodu aşağıdaki gibi değiştirirsek sorunumuz hallolacaktır.
Diğer bir kenar boşluğu çökmesi görülen durumda yukarıdaki gibi içiçe durumda olan nesnelerden içteki paragrafta bir kenar boşluğu ataması varken(margin:10px) dıştaki kapsul nesnesinin kenar boşluğu değerinin sıfır olması durumunda meydana gelir. İçteki elementin dikey kenar boşlukları çökecektir.
Html kodu yazarsak:
Resim -1 Görünen kenar boşluğu
Resim – 2 Olması gereken kenar boşluğu
Örneği görmek için tıklayınız.
Çözüm: Bu durumda padding veya kenarlık(border) ataması yaparsak sorunumuz çözülecektir.
Yukarıda bazı çözüm önerileri sundak, ayrıca kenar boşluğu çökmesi hakkındaki aşağıdaki bilgilerde bize çözüm konusunda yardımcı olacaktır.
Meydana getirilen yeni bir araştırma, Z Kuşağı'nın toplumsal medyada suni zekâ ve gerçeklik mevzularını, önceki…
Du warst die einzige für mich, und du bist gegang, ich dencke immer noch an…
Manas Elektronik Teknoloji San.tic.a.ş. Ahmet Reşat Görür, A. S. O. 1. Organize Sanayi Bölgesi Babürşah…
Tarcan Palet Ticaret ADVERTISEMENT Firma bilgileri Fax : - Gsm : +90 534 327 26…
Google'ın cinsel içerikli reklamlara yönelik uzun süredir devam eden bir yaptırımı var sadece şirket şimdiye…
Akıllı telefon alırken birçoğumuzun göz önünde bulundurduğu kriterlerin başlangıcında kamera kalitesi geliyor. Peki kamerası iyi…