Kutu Modeli

CSS'deki her nesnenin etrafında bir kutu vardır ve kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin veya öğeleri diğer öğelerle hizalamanın anahtarıdır. Bu derste, CSS Kutu Modeline giriş yapacağız, böylece nasıl çalıştığı ve bununla ilgili terminolojiyi anlayarak daha karmaşık düzen görevleri oluşturabilirsiniz.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: CSS Kutu Modeli hakkında bilgi edinmek için, kutu modelini oluşturan unsurlar ve alternatif model geçileceği ile ilgili bilgi sahibi olmak.

Blok ve satır içi kutular

CSS'de genel olarak iki tür kutuya sahibiz — blok kutular ve satır içi kurular. Bu ayrım kutunun sayfa akışı açısından ve sayfadaki diğer kutularla ilişkili olarak nasıl davrandığını ifade etmek için yapılır.

Bir kutunun türü blok(block) olarak tanımlanmışsa, aşağıdaki şekilde davranacaktır:

  • Kutu yeni bir satıra geçer.
  • Kutu, içinde bulunduğu satırın genişliği kadar uzar. Bu kutunun satırın genişliği kadar olacağı ve mevcut alanın %100'ünü dolduracağı anlamına gelir.
  • width ve height özellikleri geçerli olacaktır.
  • Dolgu (padding), kenar boşluğu (margin) ve kenarlık (border) diğer öğelerin kutudan uzağa itilmesine neden olur. Kendisinden sonraki öğelerin konumları etkilenir, önceki öğelere göre kendi konumunu belirler.

Görüntü türünü satır içi olarak değiştirmeye karar vermedikçe, başlıkların (<h1>) ve paragrafların <p> varsayılan tür olarak blok(block) görüntülenecek unsuralara örnektir.

Eğer kutunun türü satır içi(inline) olacak şekilde tanımlanmışsa:

  • Kutu yeni bir satıra geçmeyecektir.
  • width ve height özellikleri geçerli olmayacaktır.
  • Dikey yöndeki; dolgu, kenar boşlukları ve kenarlıklar uygulanacak ancak diğer kutuların kutudan uzaklaşmasına neden olmayacaktır.
  • Yatay yöndeki, dolgu, kenar boşlukları ve kenarlıkları uygulanacak fakat diğer satır içi kutuların kutudan uzaklaşmasına neden olacaktır.

Bağlantılar için kullanılan <a>  öğesi, <span>, <em> ve <strong> varsayılan tür olarak satır içi(inline) görüntülenecek unsurlara örnektir.

Bir öğenin kutu türünü tanımlayabilmek için display niteliğine block ve inline değerleri kullanılır.

Ayrıca: İç ve dış görüntüleme türleri

Bu noktada ve dış gösterim türlerini de açıklamamız daha iyi olur. Yukarıda belirtildiği gibi, CSS'deki kutular, kutunun blok mu satır içi mi olduğunu ayrıntılarıyla anlatan bir dış gösterim türüne sahiptir.

Kutular ayrıca, bu kutunun içindeki öğeleri nasıl yerleştirileceğini belirleyen bir gösterim türünede sahiptir. Varsayılan olarak, bir kutunun içindeki öğeler normal aşkışta düzenlenir, bu da diğer tüm öğelerin blok ve satır içi öğeler gibi davrandıkları anlamına gelir (yukarıda açıklandığı gibi).

Bu özellikler sayesinde, bir öğenin display niteliğine flex değerini tanımlayarak iç ekran türünü değiştirebiliriz. Öğeyi display: flex şeklinde tanımlarsak, öğenin dış görünümü block olur, fakat öğenin içindeki diğer öğelerin görüntüleme türü flex olarak değişir. Böylece bu tanım, kutunun alt öğelerini esnek öğeler haline getirir ve iç öğeler daha sonra ele alacağımız Flexbox özelliklerinde belirtilen kurallara göre düzenlenir.

Not: Görüntüleme değerleri ve kutuların blok ve satır içi düzende nasıl çalıştığı hakkında daha fazla bilgi edinmek için, MDN kılavuzundaki Blok ve Satır İçi Düzen'e bakınız.

CSS Mizanpajı hakkında daha ayrıntılı bilgi edinmeye devam ettiğinizde, flex'siyi ve kutularınızın sahip olabileceği çeşitli değerlerle karşılaşaksınnız. Örneğin grid.

Blok ve satır için görüntülüme türleri, HTML'deki öğelerin varsayılan davranış şeklidir — yukarıda da dillendirdiğimiz gibi normal akış olarak anılır, çünkü başka bir talimat olmadan, kutularımız blok veya satır içi olarak düzenlenir.

Farklı görüntüleme türlerine örnekler

Konumuza devam edelim ve bazı örneklere bir göz atalım. Aşağıda, hepsinin dış görüntüleme türü block olan eğenelerimiz var. İlki CSS'le eklenmiş bir kenarlığa sahip olan paragraftır. Tarayıcı bunu bir blok kutu olarak işler, böylece paragraf yeni bir satırda başlar ve mevcut tüm genişliğe sahip olur.

İkincisi, görüntüleme türü olarak display: flex tanımlanmış bir listemiz var. Bu, ul etiketi içindeki öğeler için esnek bir düzen oluşturur, ancak listenin kendisi bir blok kutudur ve blok kutu gibi davranır — paragraf gibi. Yeni bir satırda başlar ve satırın sahip olduğu genişliğe sahip olur.

Bununda altında, içinde iki adet <span> öğe bulunan blok türünde bir paragrafımız var. Ancak bu iki öğe normalde inline türüne sahipler, içlerinden bir tanesini .block sınıfına dahil edip görüntü türünü display: block olarak tanımlıyoruz ve inline türüne sahip bir öğe block türüne sahip bir öğe gibi davranmaya başlıyor.

 

Bir sonraki örnekte, inline görüntüleme türüne sahip öğelerin nasıl davrandığını görebilirsiniz. ilk paragrafın içindeki <span> öğeleri varsayılan olarak satır içi görüntüleme türüne sahip oldukları için bir önceki örnekte olduğu gibi yeni bir satır için tasarımı zorlamaz.

Bir de <ul> öğemiz var. Bu öğemisin görüntüleme türünü display:inline-flex tanımı ile; öğemizin içindeki öğelere esnek bir tasarım ve kendisine de satır içi kutu gibi davranmasını söylemiş oluruz.

Son olarak, iki adet paragrafımız var. Bu paragraflarımızın görüntüleme türünü display: inline olarak tanımladığımızda, sahip oldukları varsıyalan tür olan blok kutu gibi değilde satır içi kutu gibi davranmaya başlarlar ve aşağıdaki örnekte de görüldüğü gibi iki paragrafımız normal davranışları olan yeni bir satırdan başlamak yerine aynı satırda diğer öğelerle birlikte görüntülenmeye başlaycaklardır.

Değiştirin! sizde farklılıkları daha iyi görebilmek için display: inline tanımıdisplay: block ve display: inline-flex tanımını da block: flex olarak değiştirin.

 

İlerleyen derslerde esnek düzen gibi kavramlarla karşılaşacaksınız; şimdilik hatırlanması gereken en önemli şey, display niteliğinin değerinin değiştirilmesi, bir kutunun dış görüntüleme türünün blok mu yoksa satır içi mi olduğunu belirlediğini ve bunun da mizanpaşdaki diğer öğelerle birlikte nasıl görüntüleneceğini tanımlamasıdır.

Dersin geri kalanında, dış ekran türüne odaklanacağız.

CSS kutu modeli nedir?

CSS kutu modelleri tanımlarının tümü sadece blok kutular için geçerlidir. Satır içi kutular kutu modelinde tanımlanan davranışların bir kısmını kullanır. Model, bir kutunun farklı bölümlerinin (Kenar boşluğu, kenarlık, dolgu ve içerik) kutuyu oluştururken birlikte nasıl çalıştırklarını tanımlar. Biraz daha karmaşıklık ekleyecek ama bir standart, birde alternatif olmak üzere iki adet kutu modeli vardır.

Bir kutunun parçaları

Bir blok kutu oluşturabilmek için, CSS'in bize verdikleri:

  • İçerik(Content): İçeriğin görüntülendiği alandır. width ve height gibi nitelikler kullanılarak boyutlandırılabilir.
  • Dolgu(Padding): İçeriği saran bir boşluktur. boyutu padding ve ilişkili niteliklerle belirlenir.
  • Kenarlık(Border): Kenarlık; içeriği ve dolguyu sarar. Boyutu ve stili border ve ilişkili niteliklerle belirlenir.
  • Kenar boşluğu(Margin): Kenar boşluğu; içeriği, dolguyu ve kenarlığı saran, ayrıca diğer öğeler ile arasına koyan en dış katmandır. margin ve ilişkili niteliklerle belirlenir.

Aşağıdaki şema bu katmanları göstermektedir:

Diagram of the box model

Standart CSS kutu modeli

Standart kutu modelinde, bir kutuya width ve height niteliklerine değer verirseniz, bu içeriğin genişliğini ve yüksekliğini tanımlar. Kutunun kapladığı toplam boyutu elde etmek için daha sonra bu genişliğe ve yüksekliğe, eğer varsa dolgu ve kenarlık eklenir. Hesaplama aşağıda gösterilmiştir.

Aşağıda bir kutunun modelini tanımlayan width, height, margin, border, ve padding niteliklerini CSS kodu bulunmakta:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Standart kutu modelini kullanan kutumuzun kapladığı gerçek alan, dolgu ve kenarlıkta hesaba katıldığında, genişliği 410px(350 + 25 + 25 + 5 + 5) ve yüksekliği 210px(150 + 25 + 25 + 5 + 5) olacaktır.

Showing the size of the box when the standard box model is being used.

Not: Kenar boşluğu, kutunun gerçek boyutuna dahil edilmez. Elbette kutunun sayfada kaplayacağı alanı etkileyecektir fakat yalnızca kutunun dışındaki alanı etkiler. Kutunun alanı kenarlıkta durur, kenar boşluğuna uzamaz. Daha iyi anlaşılabilmesi için: Bir odaya koyacağımız 35cm genişliğinde ve 15cm uzunluğunda kolilerimizin olduğunu düşünelim. Bu kolileri odanın zeminine sıralarken aralarında 1mt mesafe bıraktığımızı düşünelim. Kolilerin arasında bıraktığımız 1mt'lik boşluk kolimizin genişliğini ve uzunluğunu etkilemez fakat odanın alacağı koli adedini etkiler.

Alternatif CSS kutu modeli

Kutunun gerçek boyutunu elde etmek için dolgu ve kenarlığı eklemenin oldukça sakıncalı olduğunu düşünebilirsiniz ve bunda da haklısınız! Bu nedenle CSS, standart kutu modelinden bir süre sonra alternatif bir kutu modeli tanıttı. Bu modeli kullandığınızda, kutunun genişlik  ve yüksekliği sayfada görünür kutunun genişliği ve yüksekliğidir. Bu nedenle içerik alanın genişliği ve yüksekliği, dolgu ve kenarlık ölçülerinin belirtilen değerden çıkartılmasıyla hesaplanır.Yukarıda kullanılan CSS, aşağıdaki sonucu verecektir. (Genişlik: 350px, yükseklik=150px)

Showing the size of the box when the alternate box model is being used.

Varsayılan olarak, tarayıcılar standart kutu modelini kullanır. Bir öğeye alternatif modeli tanımlayabilmeniz için  box-sizing: border-box tanımını yapmanız gerekmektedir. Bu sayede tarayıcıya, belirlediğiniz herhangi bir boyut için, kenarlığı dikkate almasını söylemiş olursunuz.

.box { 
  box-sizing: border-box; 
} 

Tüm öğelerinizin alternatif kutu modelini kullanmasını istiyorsanız box-sizing özelliğini <html> öğesinin üzerinde tanımlayın, ardından aşağıdaki önernekteki gibi tüm diğer öğelerin bu değeri miras alacak şekilde ayarlayın. Bunun arkasındaki püf noktasını anlayabilmeniz için,CSS'de Kutu Boyutlandırma Hakkındaki Püf Noktalar'a bakın.

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

Not: Geçmişten ilginç bir bilgi — Internet Explorer varsayılan olarak alternatif kutu modelini kullanıyordu ve geçiş için herhangi bir mekanizma mevcut değildi.

Kutu modelleriyle oynamak

Aşağıda iki kutu görüyorsunuz. Bu kutular aynı .box sınıfına dahiller ve bu sınıf ikisinede aynı  width, height, margin, border, ve padding özelliklerin atamasını yapar. Tek fark, ikinci kutu aynı zamanda alternatif kutu modelini kullanacak şekilde ayarlanmış olmasıdır.

İkinci kutunun boyutunu(.alternate sınıfına ekleyerek) ilk kutuyla eşleşecek şekilde değiştirebilir misiniz?

 

Not: Burada, bu görev için bir çözüm bulabilirsiniz..

Kutu modelini görüntüleyebilmek için tarayıcı DevTools'u kullanın

Tarayıcı geliştirme araçlarıyla(developer tools) kutu modelini daha rahat anlayabilirsiniz. Firefox'un geliştirme araçlarında bir öğeyi incelerseniz, öğenin boyutunun yanı sıra, kenar boşluğunun, dolgusunun, kenarlığınında özelliklerini görebilirsiniz. Bir öğeyi bu şekilde incelemek, kutunuzun gerçekten düşündüğünüz boyutta olup olmadığını görmenizin harika bir yoludur.

Inspecting the box model of an element using Firefox DevTools

Kenar boşluğu, dolgu ve kenarlıklar

Yukarıda zaten margin, padding, ve border'ın ne şekilde kullanıldıklarını gördünüz. Bu örneklerde kullanılan nitelikler kısayollardır ve kutunun dört kenarını da aynı anda ayarlamanıza olanak sağlar. Bu kısayolların aynı zamanda, kutunun farklı tarafları üzerinde ayrı ayrı kontrol sağlayan eşdeğer nitelikleri de vardır.

Şimdi bu nitelikleri daha detaylı inceleyelim.

Kenar boşluğu(margin)

Kenar boşluğu, kutunuzun etrafındaki görünmez bir alandır. Diğer ğeleri kutudan uzaklaştırır. Kenar boşluklarının pozitif ve negatif değerleri olabilir. Kuzunuzun bir tarafına negatif bir kenar boşluğu ayarlamak, kutunun sayfadaki diğer öğelerle çakışmasına neden olabilir. İster standart ister alternatif kutu modelini kullanıyor olun, kenar boşluğu her zaman görünür kutunun boyutu hesaplandıktan sonra eklenir.

margin niteliğini kullanarak bir öğenin tüm kenar boşluklarını tek seferde veya eşdeğer nitelikleri kullanarak her bir tarafı tek tek de kontrol edebilirsiniz:

Aşağıdaki örnekte, İçerideki kutunun sahip olduğu kenar boşlukları üzerinde ki negatif değerlerin ne şekilde etki ettiğini, kutunun ne şekilde itildiğini ve dışarıdaki kutuyu nasıl etkilediğini görebilmek için kenar boşluğu değerlerini değiştirin.

 

Kenar boşluğunun daralması

Kenar boşlukları hakkında anlaşılması gereken önemli bir konu daha vardır, kenar boşluğunun daralması kavramı. Kenar boşlukları birbirine temas eden iki öğeniz varsa ve her iki kenar boşluğu da pozitif ise, bu kenar boşlukları birleşerek, en büyük kenar boşluğuna sahip öğenin kenar boşluğu kadar birbirlerinden uzaklaşırlar. Kenar boşluklarından biri veya ikisi de negatifse, negatif değer miktarı büyük olan değerden çıkartılarak çıkan sonuç kenar boşluğu olarak belirlenir.

Aşağıdaki örnekte iki paragrafımız var. Üst paragrafta margin-bottom: 50px olarak tanımlanmış. İkinci paragraf ise margin-top: 30px olarak tanımlanmıştır. Kenar boşluğu daralması gerçekleşmiş ve ikisi arasında iki değerin toplamı kadar değilde en büyük değer olan 50px kadar boşluk oluşmuştur.

margin-top niteliğine 0 değerini atayarakta bunu test edebilirsiniz. Bu tür bir tanımlamada iki paragraf arasındaki görünür kenar boşluğu değişmez. Birinci paragrafta tanımlanan bottom-margin: 50px değeri korunur. Eğer margin-top: -10px olarak tanımlarsanız aradaki boşluğun 40px olduğunu görürsünüz. 50px - 10px = 40px.

 

Kenar boşluklarının ne zaman azalacağını ve ne zaman kapanmayacağını belirleyen birkaç kural vardır. Daha fazla bilgi için, kenar boşluğu daraltmayla ilgili sayfaya bakın. Şimdilik hatırlamanız gereken en önemli şey, kenar daralmasının gerçekleşen bir durum olduğudur. Kenar boşluklu alan yaratıyorsanız ve beklediğiniz alanı alamıyorsanız, muhtemelen olan budur.

Not: Aslında bu mantıksız bir davranış değildir. Daha önce kenar boşluğunun kutunun boyutuna dahil edilmediğinden bahsetmiştik. Pozitif bir kenar boşluğu verdiğimizde, tarayıcıya bu kutu ile diğer kutular arasında en az bu kadar boşluk olacak diyoruz. Yukarıdaki örnekte ikinci kutunun diğer kutudan 30piksel uzakta olması gerekiyor fakat ilk kutu zaten 50piksel bir mesafe koymuş. Bu yüzden ikinci kutunun sahip olması gereken mesafe fazlasıyla sağlandığından bir işlem yapılması gerekmiyor.

Kenarlık

Kenarlık, kenar boşluğu ile kutunun dolgusu arasına çizilir. Standart kutu modelini kullanıyorsanız, sınırın boyutu kutunun width ve heigh niteliklerinin değerlerine eklenir. Alternatif kutu modelini kullanıyorsanız, kenarlığın boyutu, mevcut alanın bir kısmını kapladığı için içerik kısmının küçültür.

Kenarlıkları şekillendirmek için çok sayıda özellik vardır — dört kenarlık vardır ve her kenarlığın üzerinde değişiklik yapmak isteyebileceğiniz stil, renk ve genişlik özellikleri vardır.

border niteliği ile bu dört kenarlığın stilini, rengi ve genişliğini aynı anda ayarlayabilirsiniz.

Her bir kenarın özelliklerini ayrı ayrı tanımlamak için şunları kullanabilirsiniz:

Her kenarın stilini, rengini ve genişliğini ayarlamak için şunları kullanabilirsiniz:

Her bir kenarın stil, renk ve genişlik ayarlarını ayrı ayrı yapmak istediğinizde aşağıdaki nitelikleri kullanabilirsiniz:

Aşağıdaki örnekte, çeşitli kenarlıklar oluşturabilmek için kenarlık özelliğinin çeşitli niteliklerinden bazılarını kullandık. Nasıl çalıştıklarını daha iyi anlayabilmek için bazı niteliklerin değerlerini değiştirin yada yeni nitelikler ekleyin. Kenarlık özellikleri için MDN sayfaları, aralarında seçim yapabileceğiniz farklı kenarlık stilleri hakkında bilgi verir.

 

Dolgu

Dolgu, Kenarlık ve içerik arasında bulur. Kenar boşluklarının aksine, negatif değer alamazlar. bu nedenle değri 0 yada pozitif bir değer olmalıdır. Öğenize uygulanan herhengi bir arka plan, dolgunun arkasında görüntülenir ve genellikle içeriği sınırdan uzaklaştırmak için kullanır.

padding niteliği ile bir öğenin dolgusunu bir seferde tanımlayabilirsiniz yada tarafın dolgusunu ayrı ayrı tanımlamak için aşağıdaki nitelikleri kullanabilirsiniz.

Aşağıdaki örnekte bulunan .box sınıfındaki dolgu niteliklerinin değerlerini değiştirerek içerideki kutunun içindeki metnin kutuya göre yerleşimindeki değişimleri gözlemleyebililrsiniz..

Ayrıca .container sınıfı ile, birinci kutu ile ikinci kutu arasındaki bulunan boşluğu değiştirebilirsiniz. Dolgu herhangi bir öğe üzerinde uygulanabilir ve kenarlığı ile öğenin içerik kısmında ne varsa onunla arasına mesafe koymasını sağlar.

 

Kutu modeli ve satır içi kutular

Yukarıdakilerin tümü tamamen blok kutuları için geçerlidir. <span> gibi bazı satır içi kutulara sahip öğelere de kutu modeli uygulanabilir.

Aşağıdaki örnekte, paragraf içerisinde bir adet <span> var. Bu satır içi kutuya width, height, margin, border, ve padding uyguladık. Genişlik ve yüksekliğin göz ardı edildiğini görebilirsiniz. Dikey; kenar boşlukları, dolgu ve kenarlıklar uygulanır, ancak bunlar diğer içeriğin satır içi kutumuzla ilişkisini değiştirmez ve bu nedenle dolgu ve kenarlık, paragraftaki diğer kelimelerle çakışır. Yatay; dolgu, kenar boşlukları ve kenarlıklara uyulur ve içeriğin kutudan uzakşamasına neden olur.

 

display: inline-block kullanımı

display niteliğinin özel bir değeri vardır. Bu değer, bir öğenin yeni bir satıra geçmesini istemediğimiz, ayrıca yukarıdaki örnekte olduğu gibi bir çakışmanın da olmasını istemediğimiz durumlarda kullanışlıdır.

display: inline-block bir öğeye zaten bildiğimiz blok kutuların davranışlarından bazılarını kazandırır:

  • width ve height nitelikleri uygulanır.
  • padding, margin, ve border nitelikleri diğer öğelerin kutudan uzağa itilmesine neden olur.

Bunlarla birlikte, yeni bir satıra bölünmez ve sadece,  width ve height nitelikleri belirtilirse içeriğinden daha büyük hale gelir.

Bu sonraki örnekte, <span> öğesine eklediğimiz display: inline-block  komutunu display: block olarak değiştirmeyi veya satırı tamamen kaldırmayı deneyin.

 

Bunun yararının görülebileceği bir örnek vermek gerekirse; padding uygulayarak daha büyük isabet alanına sahip bağlantı öğeleri eklemek isteyebiliriz. oysa <a> öğesi <span> gibi bir satır içi öğesidir ve padding istediğimiz gibi davranmayacaktır. Bunun için, display: inline-block tanımını kullanarak dolgunun diğer öğelerle daha iyi izalanmasını izin vererek kullanıcının bağlantıya tıklamasını kolaylaştırırız.

Bunu gezinme çubuklarında oldukça sık görüyorsunuz. Aşağıdaki navigasyonda flexbox kullanılarak bağlantıların yatay görüntülenmesini sağladık. <a> bağlantı öğesinin isabet alanını genişletmek için dolgu ve görünebilir olması için öğemize bir arkaplan rengi tanımladık. Örneğimizde de görebileceğiniz gibi dolgu, <ul> öğesinin üzerindeki kenarlık ile çakışıyor. Bunun nedeni, <a>'nın bir satır içi öğe olmasıdır.

.links-list a seçicisine display: inline-block kuralını eklediğinizde, dolgunun diğer öğeler tarafından dikkate alındığının ve bu sorunun giderildiğini göreceksiniz.

 

Becerilerinizi test edin!

Bu dersimizde çok şey ela aldık, ancak en önemli bilgileri hatırlıyor musunuz? Devam etmeden önce bu bilgileri anladığınızı doğrulamak için bazı ek testler hazırladık — Becerilerinizi test edin: Kutu Modeli.

Özet

Kutu modeli hakkında bilmeniz gerekenlerin çoğu bu. İleride çok fazla kutu ile çalışmaya başladığınızda kafanız karışırsa, bu derse geri dönmek isteyebilirisniz.

Bir sonraki derste, düz kutularınızın daha ilginç görünmesini sağlama için arka planların ve kenarlıkların nasıl kullanılabileceğine bir göz atacağız.

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de elemanların boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'inizi düzenleme