Kutu modeli

CSS’deki her şeyin etrafında bir kutu bulunur. Bu kutuları anlamak CSS ile mizanpajlar oluşturabilmenin veya öğeleri diğer öğelerle hizalamanın anahtarıdır. Aşağıdaki yazıda kutu modelinin nasıl çalıştığına ve ilgili terminolojiye detaylı bir şekilde bakacağız.

Blok ve satır içi kutular

CSS’de genel olarak iki tür kutumuz var – blok kutular ve satır içi kutular. Bu özellikler, kutunun sayfa akışı ve sayfadaki diğer kutulara göre nasıl davrandığını gösterir. Kutuların ayrıca bir iç görüntü türü ve bir dış görüntü türü bulunur. Öncelikle blok kutu ve satır içi kutu ile ne demek istediğimizi açıklayalım. Daha sonra iç ve dış görüntü tipinin ne anlama geldiğine bakalım.

Bir kutunun dış görüntüleme türü block ise, aşağıdaki şekillerde davranır:

• Kutu yeni bir satıra geçer.
• Kutu, kabındaki mevcut alanı doldurmak için satır içi yönde uzar. Çoğu durumda bu, kutunun kabı kadar geniş olacağı ve mevcut alanın %100’ünü dolduracağı anlamına gelir.
• width ve height özelliklerine saygı gösterilir.
• Dolgu, kenar boşluğu ve kenarlıklar diğer öğelerin kutudan uzağa itilmesine neden olur

<h1> ve <p> gibi bazı HTML öğeleri varsayılan dış görüntüleme türü olarak block kullanılır.

Bir kutunun dış görüntüleme türü inline ise, o zaman:

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

<a>, <span>, <em> ve <strong> gibi bazı HTML öğeleri varsayılan dış görüntüleme türü olarak inline kullanır.

Bir elemana uygulanan kutu tipi display ile tanımlanır. display‘in dış görünüm değerleri block ve inline‘dır.

İç ve dış display türleri

Bu noktada iç ve dış görünüm türlerini de açıklamakta fayda var. Yukarıda bahsedildiği gibi, CSS’deki kutular, kutunun blok veya satır içi olup olmadığını ayrıntılandıran bir dış görüntü tipine sahiptir.

Kutuların ayrıca, o kutunun içindeki öğelerin nasıl yerleştirileceğini belirleyen bir de iç ekran türü vardır. Varsayılan olarak, bir kutunun içindeki öğeler normal akışta düzenlenir, yani diğer blok ve satır içi öğeler gibi davranırlar (yukarıda açıklandığı gibi).

Ancak, display:flex gibi değerleri kullanarak iç görüntü türünü değiştirebiliriz. Bir öğeye display:flex; verirsek, dış görüntü tipi block olduğu halde iç görüntü tipi flex olarak değiştirilir. Bu kutunun herhangi bir doğrudan alt öğeleri de flex öğeler olacaktır.

CSS Düzeni ile ilerlemeye devam ettikçe flex kutularınızın sahip olabileceği çeşitli diğer iç değerlerle de karşılaşacaksınız, örneğin grid.

Bununla birlikte, blok ve satır içi düzen, web’deki öğelerin varsayılan davranış şeklidir – yukarıda söylediğimiz gibi, bu, bazen normal akış olarak adlandırılır. Başka bir talimat olmadan kutularımız blok veya satır içi kutular olarak düzenlenir.

Farklı ekran türlerine örnekler

Devam edelim ve bazı örneklere bakalım. Aşağıda, tümü bir dış görüntüleme türüne sahip olan üç farklı block HTML öğemiz var. İlki CSS’de kenarlık eklenmiş bir paragraf. Tarayıcı bunu bir blok kutusu olarak işler, böylece paragraf yeni bir satırda başlar ve mevcut olan tam genişliğe genişler.

İkincisi, display: flex kullanılarak düzenlenen bir liste. Bu, kap içindeki öğeler için esnek bir düzen oluşturur, ancak listenin kendisi bir blok kutudur ve – paragraf gibi – tam kap genişliğine genişler ve yeni bir satıra geçer.

Bunun altında, içinde iki <span> öğe olan blok düzeyinde bir paragrafımız var. Bu elemanlar normalde inline olmalı, ancak elemanlardan birinin display:block içeren bir blok sınıfı var.

p, 
ul {
  border: 2px solid rebeccapurple;
  padding: .5em;
}

.block,
li {
  border: 2px solid blue;
  padding: .5em;
}

ul {
  display: flex;
  list-style: none;
}

.block {
  display: block;
}      

<p>I am a paragraph. A short one.</p>
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p>

Bir sonraki örnekte inline öğelerin nasıl davrandığını görelim. İlk paragraftaki <span> elemanları varsayılan olarak satır içidirler ve böylece yeni satır oluşturmazlar.

Ayrıca, bazı esnek öğelerin etrafında bir satır içi kutu oluşturan, display: inline-flex olarak ayarlanmış bir <ul> öğemiz var.

Son olarak, her ikisi de display: inline olarak ayarlanmış iki paragrafımız var. Satır içi esnek kap ve paragrafların tümü yeni satırlara bölünmek yerine tek bir satırda birlikte çalışır.

Aşağıdaki örneği yerel makinanıza kaydedip, öğelerin display değerlerini değiştirmeyi deneyin.

p, 
ul {
  border: 2px solid rebeccapurple;
}

span,
li {
  border: 2px solid blue;
}

ul {
  display: inline-flex;
  list-style: none;
  padding: 0;
} 

.inline {
  display: inline;
}

<p>
    I am a paragraph. Some of the
    <span>words</span> have been wrapped in a
    <span>span element</span>.
</p>     
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>
<p class="inline">I am a paragraph. A short one.</p>
<p class="inline">I am another paragraph. Also a short one.</p>

Bu kılavuzun ilerleyen bölümlerinde flex layout ile karşılaşacaksınız; Şimdilik hatırlanması gereken en önemli şey, display özelliğin değerini değiştirmenin, bir kutunun dış görüntü tipinin blok veya satır içi olup olmadığını değiştirebileceğidir, bu da mizanpajdaki diğer öğelerin yanında görüntülenme şeklini değiştirir. 

Yazının geri kalanında, dış ekran tipine odaklanacağız.

CSS kutu modeli nedir?

CSS kutu modeli bir bütün olarak blok kutular için geçerlidir. Satır içi kutular, kutu modelinde tanımlanan davranışların yalnızca bir kısmını kullanır. Model, bir kutunun farklı bölümlerinin – kenar boşluğu, kenarlık, dolgu ve içerik – bir sayfada görebileceğiniz bir kutu oluşturmak için birlikte nasıl çalıştığını tanımlar. 

Buraya kadar oldukça basit olduğu için biraz karmaşıklık eklemek amacıyla bir standart kutu modeli ve bir de alternatif kutu modeli oluşturulmuştur.

Bir kutunun parçaları

CSS’de bir blok kutusu oluştururken şunlara sahibiz:

• İçerik kutusu : width ve height gibi özellikler kullanılarak boyutlandırılabilen, içeriğinizin görüntülendiği alandır. 
• Dolgu kutusu : Dolgu, içeriğin etrafına beyaz boşluk olarak oturur; boyutu, padding ve ilgili özellikler kullanılarak kontrol edilebilir .
• Kenarlık kutusu : Kenarlık kutusu, içeriği ve herhangi bir dolguyu sarar. Boyutu ve stili, border ve ilgili özellikler kullanılarak kontrol edilebilir .
• Kenar boşluğu kutusu : Kenar boşluğu, içeriği, dolguyu ve kenarlığı bu kutu ve diğer öğeler arasında boşluk olarak saran en dış katmandır. Boyutu margin ve ilgili özellikler kullanılarak kontrol edilebilir .

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

Standart CSS kutu modeli

Standart kutu modelinde, bir kutuya width ve bir height verirseniz , bu, içerik kutusunun genişliğini ve yüksekliğini tanımlar. Ardından, kutunun kapladığı toplam boyutu elde etmek için bu genişliğe ve yüksekliğe herhangi bir dolgu ve kenarlık eklenir – aşağıdaki resme bakın.

Eğer bir kutuda width, height, margin, border, ve padding değerleri aşağıdaki gibi tanımlanmışsa:

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

Gerçek kutunun kapladığı alan 410 piksel olur (350 + 25 + 25 + 5 + 5) ve 210px yüksekliğe sahip olur (150 + 25 + 25 + 5 + 5).

Not: Kenar boşluğu, kutunun gerçek boyutuna sayılmaz – elbette, kutunun sayfada kaplayacağı toplam alanı etkiler, yalnızca kutunun dışındaki alanı etkiler. Kutunun alanı sınırda durur – kenar boşluğuna kadar uzanmaz.

Alternatif CSS kutu modeli

Kutunun gerçek boyutunu elde etmek için kenarlık ve dolgu eklemenin oldukça zahmetli olduğunu düşünebilirsiniz ve haklısınız! Bu nedenle, CSS’nin standart kutu modelinden bir süre sonra alternatif bir kutu modeli tanıtıldı. Bu modeli kullandığımızda, herhangi bir genişlik, sayfadaki görünür kutunun genişliğidir, bu nedenle içerik alanı genişliği, bu genişlikten dolgu ve kenarlık genişliğinin çıkarılmasıyla elde edilir. Yukarıda kullanılanla aynı CSS aşağıdaki sonucu verecektir (genişlik = 350 piksel, yükseklik = 150 piksel).

Tarayıcılar varsayılan olarak standart kutu modelini kullanır. Bir eleman için alternatif modeli açmak istiyorsanız, bunu box-sizing: border-box ayarlayarak yaparsınız. Bunu yaparak, tarayıcıya yukarıda gösterildiği gibi sınır kutusunu tanımlı alanınız olarak kullanmasını söylüyorsunuz.

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

Tüm öğelerinizin alternatif kutu modelini kullanmasını istiyorsanız ve bu, geliştiriciler arasında yaygın bir seçimse, <html> öğesinin box-sizing özelliğini ayarlayın. Ardından aşağıdaki kod parçasında görüldüğü gibi diğer tüm öğeleri bu değeri devralacak şekilde ayarlayı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 hiçbir mekanizma mevcut değildi.

Kutu modellerle oynama

Aşağıdaki örnekte iki kutu görüyorsunuz. Her ikisinin de .box sınıfı var ve böylece width, height, margin, border, ve padding özelliklerini ayarlayabiliyoruz. Tek fark, ikinci kutunun alternatif kutu modelini kullanacak şekilde ayarlanmış olmasıdır.

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 300px;
  height: 150px;
}

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

<div class="box">I use the standard box model.</div>
<div class="box alternate">I use the alternate box model.</div>

Kutu modelini tarayıcı DevTools ile görüntüleyin

Tarayıcı geliştirici araçları ile kutu modelini daha kolay anlayabilirsiniz. Firefox’un DevTools uygulamasında bir öğeyi incelerseniz öğenin boyutunu, kenar boşluğunu, dolgusunu ve kenarlığını görebilirsiniz. Bir öğeyi bu şekilde incelemek, kutunuzun gerçekten düşündüğünüz boyutta olup olmadığını öğrenmenin harika bir yoludur!

Kenar boşlukları, dolgu ve kenarlıklar

Zaten margin, padding ve border özelliklerini yukarıdaki örnekte görmüştük. Bu örnekte kullanılan özellikler kısayollardır ve kutunun dört tarafını da aynı anda ayarlamamıza izin verir. Bu kısayollar aynı zamanda kutunun farklı taraflarını ayrı ayrı kontrol etmeye izin veren eşdeğer uzun yollara da sahiptir.

Bu özellikleri daha ayrıntılı olarak inceleyelim.

margin – kenar boşluğu

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 veya negatif değerleri olabilir. Kutunuzun bir tarafında negatif bir kenar boşluğu ayarlamak, kutunun sayfadaki diğer şeylerle çakışmasına neden olabilir. İster standart ister alternatif kutu modelini kullanın, margin her zaman görünür kutunun boyutu hesaplandıktan sonra eklenir.

Bir öğenin tüm kenar boşluklarını bir kerede margin özelliği kullanarak veya eşdeğer uzun özellikleri kullanarak her bir tarafı ayrı ayrı kontrol edebiliriz :

• margin-top
• margin-right
• margin-bottom
• margin-left

Aşağıdaki örnekte, kenar boşluğunun bu öğe ile içerdiği öğe arasında boşluk oluşturması veya kaldırması (negatif bir kenar boşluğuysa) nedeniyle kutunun nasıl itildiğini görmek için kenar boşluğu değerlerini değiştirmeyi deneyin.

.box {
  margin-top: -40px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 4em;
}

<div class="container">
  <div class="box">Change my margin.</div>
</div>

margin çökmesi

Kenar boşlukları hakkında anlaşılması gereken en önemli şey, kenar boşluğunun çökmesi kavramıdır. Kenar boşlukları birbirine değen iki öğeniz varsa ve her iki kenar boşluğu da pozitifse, bu kenar boşlukları birleşerek tek bir kenar boşluğu oluşturur. Bu kenar boşluğunun boyutu en büyük bireysel kenar boşluğuna eşit olur. Bir margin negatifse, değeri toplamdan çıkarılacaktır. Her ikisinin de negatif olduğu durumlarda, marginler daraltılacak ve en büyük değer kullanılacaktır.

Aşağıdaki örnekte iki paragrafımız var. Üst paragraf 50 piksele sahiptir., margin-bottom:50.  İkinci paragraf 30 piksele sahiptir, margin-top:30. Kenar boşlukları birlikte daraltılmıştır, bu nedenle kutular arasındaki gerçek kenar boşluğu, iki kenar boşluğunun toplamı değil, 50 pikseldir.

Bunu, ikinci margin-top paragrafın değerini 0’a ayarlayarak test edebilirsiniz. İki paragraf arasındaki görünür kenar boşluğu değişmez – birinci bottom-margin paragrafta ayarlanan 50 pikseli korur. -10 piksele ayarlarsanız, toplam kenar boşluğunun 40 piksel olduğunu görürsünüz – 50 pikselden çıkarılır.

.one {
  margin-bottom: 50px;
}

.two {
  margin-top: 30px;
}

<div class="container">
  <p class="one">I am paragraph one.</p>
  <p class="two">I am paragraph two.</p>
</div>

Kenar boşluklarının ne zaman çökeceğini ve ne zaman kapanmayacağını belirleyen bir dizi kural bulunur. Şimdilik hatırlanması gereken en önemli şey, margin çökmesinin gerçekleşen bir şey olduğudur. Kenar boşlukları ile alan yaratıyor ve beklediğiniz alanı alamıyorsanız, muhtemelen gerçekleşen şey budur.

Sınırlar

Kenar boşluğu ve bir kutunun dolgusu arasına sınır çizilir. Standart kutu modelini kullanıyorsanız, sınırın boyutu kutunun width ve height değerine eklenir. Alternatif kutu modelini kullanıyorsanız, kenarlığın boyutu, mevcut olan alanın bir kısmını kapladığından içerik kutusunu küçültür width ve height.

Kenarları şekillendirmek için çok sayıda özellik bulunur — dört kenarlık vardır ve her kenarlığın işlemek isteyebileceğimiz bir stili, genişliği ve rengi vardır.

border özelliği kullanarak dört kenarlığın tümünün genişliğini, stilini veya rengini aynı anda ayarlayabilirsiniz .

Her bir tarafın özelliklerini ayrı ayrı ayarlamak için ise şunları kullanabilirsiniz:

• border-top
• border-right
• border-bottom
• border-left

Tüm kenarların genişliğini, stilini veya rengini ayarlamak için aşağıdakileri kullanın:

• border-width
• border-style
• border-color

Tek bir tarafın genişliğini, stilini veya rengini ayarlamak için daha ayrıntılı uzun yol özelliklerinden birini kullanabilirsiniz:

• border-top-width
• border-top-style
• border-top-color
• border-right-width
• border-right-style
• border-right-color
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left-width
• border-left-style
• border-left-color

Aşağıdaki örnekte, kenarlıklar oluşturmak için çeşitli kısayollar ve uzun yol gösterimleri kullandık. Nasıl çalıştıklarını anladığınızdan emin olmak için farklı özelliklerle biraz oynayın. 

.container {
  border-top: 5px dotted green;
  border-right: 1px solid black;
  border-bottom: 20px double rgb(23,45,145);
}

.box {
  border: 1px solid #333333;
  border-top-style: dotted;
  border-right-width: 20px;
  border-bottom-color: hotpink;
}

<div class="container">
  <div class="box">Change my borders.</div>
</div>

Dolgu

Dolgu, kenarlık ve içerik alanı arasında bulunur. Kenar boşluklarından farklı olarak, negatif miktarda dolguya sahip olamazsınız. Bu nedenle değer 0 veya pozitif bir değer olmalıdır. Dolgu, genellikle içeriği kenardan uzağa itmek için kullanılır. Öğenize uygulanan herhangi bir arka plan, dolgunun arkasında görüntülenecektir.

padding özelliğini kullanarak bir öğenin tüm taraflarındaki dolguyu veya eşdeğer uzun yol özelliklerini kullanarak her taraftaki dolguyu kontrol edebiliriz :

• padding-top
• padding-right
• padding-bottom
• padding-left

Aşağıdaki örnekte .box sınıfı üzerindeki padding değerlerini değiştirirseniz, bunun kutuya göre metnin başladığı yerin de değiştiğini görebilirsiniz.

Ayrıca kap ile kutu arasında boşluk bırakacak olan .container sınıfının üzerindeki dolguyu da değiştirebilirsiniz. Dolgu herhangi bir öğe için değiştirilebilir. Kenarlık ile öğenin içindeki her şey arasında boşluk bırakacaktır.

.box {
  padding-top: 0;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 4em;
}

.container {
  padding: 20px;
}

<div class="container">
  <div class="box">Change my padding.</div>
</div>

Kutu modeli ve satır içi kutular

Yukarıdakilerin tümü tamamen blok kutuları için geçerlidir. Özelliklerden bazıları bir <span> öğesi gibi satır içi kutulara da uygulanabilir.

Aşağıdaki örnekte, bir paragraf içinde bir <span> var ve bu öğeye width, height, margin, border, ve padding uyguladık. Bu öğe için genişlik ve yüksekliğin göz ardı edildiğini görebilirsiniz. Dikey kenar boşluğu, dolgu ve kenarlık dikkate alınır, ancak bu, geri kalan içeriğin satır içi kutumuzla ilişkisini değiştirmez. Bu nedenle dolgu ve kenarlık paragraftaki diğer kelimelerle çakışır. Yatay dolgu, kenar boşlukları ve kenarlıklara saygı duyulur ve diğer içeriğin kutudan uzaklaşmasına neden olur.

span {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
}

<p>
    I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>    

Ekranı kullanma: satır içi blok

display‘in inline ve blok arasında bir orta yol sağlayan özel bir değeri de bulunur. Bu, bir öğenin yeni bir satıra geçmesini istemediğiniz, ancak yukarıda görülen örtüşmelere saygı duymasını ve bunlardan kaçınmasını istediğiniz durumlar için kullanışlıdır 

Bir öğe, display: inline-block öğesidir. Böyle bir öğe zaten bildiğimiz blok öğelerin bir alt kümesidir:

• width ve heightözellikleri saygı gösterilir.
• padding, margin, ve border diğer öğelerin kutudan uzağa itilmesine neden olur.

Bununla birlikte, yeni bir satıra geçiş yapmaz ve yalnızca width ve height özellikleri eklediğinizde içeriğinden daha büyük olur.

Bu sonraki örnekte, <span> elemanına display: inline-block ekliyoruz. Bu özelliği display: block ile değiştirmeyi deneyin.

span {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
  display: inline-block;
}

<p>
    I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>     

Bunun yararlı olabileceği yer bir bağlantıya padding ekleyerek daha büyük bir bağlantı alanı vermek istediğiniz zamandır. <a> gibi bir satır içi öğede display: inline-block özelliğini dolgunun ayarlanmasına izin vermek için kullanabilirsiniz, bu da kullanıcının bağlantıyı tıklamasını kolaylaştırır.

Bunu gezinme çubuklarında oldukça sık görürsünüz. Aşağıdaki navigasyon aşağıda flexbox kullanır. Biz de <a> öğelerine dolgu ekledik. Böylece bağlantı üzerine gelince background-color değiştirilebilir. Burada dolgu, <ul> öğesindeki kenarlıkla örtüşüyor gibi görünü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ı ekleyerek dolguya diğer öğeler tarafından saygı gösterilmesine neden olabiliriz. Aşağıdaki kodu bu şekilde düzenlemeyi deneyin.

.links-list a {
  background-color: rgb(179,57,81);
  color: #fff;
  text-decoration: none;
  padding: 1em 2em;
}

.links-list a:hover {
  background-color: rgb(66, 28, 40);
  color: #fff;
}

<nav>
  <ul class="links-list">
    <li><a href="">Link one</a></li>
    <li><a href="">Link two</a></li>
    <li><a href="">Link three</a></li>
  </ul>
</nav>  

Becerilerinizi test edin!

Bu makalede çok şey ele aldık, ancak en önemli bilgiyi hatırlayabiliyor musunuz? Devam etmeden önce bu bilgileri öğrendiğinizden emin olun.

Özet

Kutu modeli hakkında öğrenmemiz gerekenlerin çoğu bu makalede anlatıldı. Mizanpajınızda ne kadar büyük kutuların olduğu konusunda kafanız karışırsa bu yazıya geri dönmek isteyebilirsiniz.

Bir sonraki yazıda, düz kutularınızı daha ilginç hale getirmek için arka planların ve sınırların nasıl kullanılabileceğine bakacağız.