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şturabilirsin.

Ö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 davranacağı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ırdaki 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ştirmez isek, başlıklar ve paragraflar varsayılan görüntüleme türü blok(block) olan öğelere örnektir.

Eğer kutunun görüntüleme 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 ve diğer kutuların kutudan uzaklaşmasına neden olmayacaktır.
  • Yatay yöndeki, dolgu, kenar boşlukları ve kenarlıkları uygulanacak ve 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 öğelere ö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 yerinde 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 bir göz at.

CSS Mizanpajı hakkında daha ayrıntılı bilgi edinmeye devam ettiğinde, flex'siyi ve kutularının sahip olabileceği çeşitli değerlerle karşılaşaksınn. Ö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 varsayılan blok veya satır içi değerlerine göre düzenlenirler.

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 öğ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 kadar genişler.

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örebilirsin. 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ğil de 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şlarlar.

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 display: flex olarak değiştirin.

 

İlerleyen derslerde esnek düzen gibi kavramlarla karşılaşacaksın; ş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 mizanpajdaki 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): İçeriği ve dolguyu sarar. Boyutu ve stili border ve ilişkili niteliklerle belirlenir.
  • Kenar boşluğu(Margin): İçeriği, dolguyu ve kenarlığı saran, ayrıca diğer öğeler ile arasına mesafe 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 verirsen, 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üşünebilirsin ve bunda da haklısın! Bu nedenle CSS, standart kutu modelinden bir süre sonra alternatif bir kutu modeli tanıttı. Bu modeli kullandığında, 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ı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ımlayabilmen için  box-sizing: border-box tanımını yapman gerekmektedir. Bu sayede tarayıcıya, belirlediğin herhangi bir boyut için, kenarlığı dikkate almasını söylemiş olursun.

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

Tüm öğelerinin alternatif kutu modelini kullanmasını istiyorsan 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ı anlayabilmen 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 mekanizması mevcut değildi.

Kutu modelleriyle oynamak

Aşağıda iki kutu görüyorsun. 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 misin?

 

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

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 anlayabilirsin. Firefox'un geliştirme araçlarında bir öğeyi incelersen, öğenin boyutunun yanı sıra, kenar boşluğunun, dolgusunun, kenarlığınında özelliklerini görebilirsin. Bir öğeyi bu şekilde incelemek, kutunun gerçekten düşündüğün boyutta olup olmadığını görmenin 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. Bu örneklerde kullanılan nitelikler kısayollardır ve kutunun dört kenarını da aynı anda ayarlamana 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, kutunun 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. Kutunun 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 edebilirsin:

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 daralma kavramı. Kenar boşlukları birbirine temas eden iki öğen 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, sayısal değeri 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 edebilirsin. 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 aradaki boşluğun 40px olduğunu görürsün. 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 gereken en önemli şey, kenar daralmasının gerçekleşen bir durum olduğudur. Kenar boşluklu alan yaratıyorsan ve beklediğin alanı alamıyorsan, 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, sınırın boyutu kutunun width ve heigh niteliklerinin değerlerine eklenir. Alternatif kutu modelini kullanıyorsan, kenarlığın boyutu, mevcut alanın bir kısmını kapladığı için içerik kısmı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ğin 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 ayarlayabilirsin.

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

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

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

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ğin 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. Öğene 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ımlayabilirsin yada her tarafın dolgusunu ayrı ayrı tanımlamak için aşağıdaki nitelikleri kullanabilirsin.

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özlemleyebilirsin.

Ayrıca .container sınıfı ile, birinci kutu ile ikinci kutu arasındaki bulunan boşluğu değiştirebilirsin. Dolgu herhangi bir öğe üzerinde uygulanabilir ve kenarlık ile içerik kısmında ne varsa onunla arasına mesafe bırakılması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örebilirsin. 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.

 

Satır içi kutular içinde bulundukları satırı etkileyebilirler. Kendilerinden önceki veya sonraki satırları ve satırların içeriğini etkileyemezler.

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üyorsun. 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ğin 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ğin de, dolgunun diğer öğeler tarafından dikkate alındığını ve bu sorunun giderildiğini göreceksin.

 

Becerilerini test et!

Bu dersimizde çok şey ela aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testler hazırladım — Becerilerini test et: Kutu Modeli.

Özet

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

Bir sonraki derste, düz kutularını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 öğelerin boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'ini düzenleme