path: root/files/tr/learn/css/building_blocks/the_box_model/index.html

---
title: Kutu Modeli
slug: Learn/CSS/Building_blocks/The_box_model
tags:
  - Başlangıç
  - Beginner
  - CSS
  - Dolgu
  - Eğitim
  - Gorüntü
  - Kenar payı
  - Kutu Modeli
  - Learn
  - Sınır
  - border
  - box model
  - display
  - margin
  - padding
translation_of: Learn/CSS/Building_blocks/The_box_model
original_slug: Öğren/CSS/CSS_yapi_taslari/The_box_model
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>

<p>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, <em>CSS Kutu Modeline</em> giriş yapacağız, böylece nasıl çalıştığı ve bununla ilgili terminolojiyi anlayarak daha karmaşık düzen görevleri oluşturabilirsin.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Ön koşullar:</th>
   <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve  HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td>
  </tr>
  <tr>
   <th scope="row">Amaç:</th>
   <td>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.</td>
  </tr>
 </tbody>
</table>

<h2 id="Blok_ve_satır_içi_kutular">Blok ve satır içi kutular</h2>

<p>CSS'de genel olarak iki tür kutuya sahibiz — <strong>blok kutular</strong> ve <strong>satır içi kurular</strong>. 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.</p>

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

<ul>
 <li>Kutu yeni bir satıra geçer.</li>
 <li>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.</li>
 <li>{{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olacaktır.</li>
 <li>Dolgu (<code>padding</code>), kenar boşluğu (<code>margin</code>) ve kenarlık (<code>border</code>) diğer öğelerin kutudan uzağa itilmesine neden olur. Kendisinden sonraki öğelerin konumları etkilenir, önceki öğelere göre kendi konumunu belirler.</li>
</ul>

<p>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(<code>block</code>) olan öğelere örnektir.</p>

<p>Eğer kutunun görüntüleme türü satır içi(<code>inline</code>) olacak şekilde tanımlanmışsa:</p>

<ul>
 <li>Kutu yeni bir satıra geçmeyecektir.</li>
 <li>{{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olmayacaktır.</li>
 <li>Dikey yöndeki; dolgu, kenar boşlukları ve kenarlıklar uygulanacak ve diğer kutuların kutudan uzaklaşmasına neden <strong><u>olmayacaktır</u></strong>.</li>
 <li>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 <strong><u>olacaktır</u></strong>.</li>
</ul>

<p>Bağlantılar için kullanılan <code>&lt;a&gt;</code>  öğesi, <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> ve <code>&lt;strong&gt;</code> varsayılan tür olarak satır içi(<code>inline</code>) görüntülenecek öğelere örnektir.</p>

<p>Bir öğenin kutu türünü tanımlayabilmek için {{cssxref("display")}} niteliğine <code>block</code> ve <code>inline</code> değerleri kullanılır.</p>

<h2 id="Ayrıca_İç_ve_dış_görüntüleme_türleri">Ayrıca: İç ve dış görüntüleme türleri</h2>

<p>Bu noktada <strong>iç</strong> ve <strong>dış</strong> 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 <em>dış</em> gösterim türüne sahiptir.</p>

<p>Kutular ayrıca, bu kutunun içindeki öğeleri nasıl yerleştirileceğini belirleyen bir <em>iç</em> gösterim türünede sahiptir. Varsayılan olarak, bir kutunun içindeki öğeler <strong><a href="/tr/docs/Learn/CSS/CSS_layout/Normal_Flow">normal aşkışta</a></strong> 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).</p>

<p>Bu özellikler sayesinde, bir öğenin <code>display</code> niteliğine <code>flex</code> değerini tanımlayarak iç ekran türünü değiştirebiliriz. Öğeyi <code>display: flex</code> şeklinde tanımlarsak, öğenin dış görünümü <code>block</code> olur, fakat öğenin içindeki diğer öğelerin görüntüleme türü <code>flex</code> 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 <a href="/tr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> özelliklerinde belirtilen kurallara göre düzenlenir.</p>

<div class="blockIndicator note">
<p><strong>Not</strong>: 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 <a href="/tr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Blok ve Satır İçi Düzen'e</a> bir göz at.</p>
</div>

<p>CSS Mizanpajı hakkında daha ayrıntılı bilgi edinmeye devam ettiğinde, <code>flex</code>'siyi ve kutularının sahip olabileceği çeşitli değerlerle karşılaşaksınn. Örneğin <code><a href="/tr/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>

<p>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 <em>normal akış</em> 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.</p>

<h2 id="Farklı_görüntüleme_türlerine_örnekler">Farklı görüntüleme türlerine örnekler</h2>

<p>Konumuza devam edelim ve bazı örneklere bir göz atalım. Aşağıda, hepsinin dış görüntüleme türü <code>block</code> 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.</p>

<p>İkincisi, görüntüleme türü olarak <code>display: flex</code> tanımlanmış bir listemiz var. Bu, <code>ul</code> 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.</p>

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

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>

<p>Bir sonraki örnekte, <code>inline</code> görüntüleme türüne sahip öğelerin nasıl davrandığını görebilirsin. ilk paragrafın içindeki <code>&lt;span&gt;</code> öğ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.</p>

<p>Bir de <code>&lt;ul&gt;</code> öğemiz var. Bu öğemisin görüntüleme türünü <code>display:inline-flex</code> 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.</p>

<p>Son olarak, iki adet paragrafımız var. Bu paragraflarımızın görüntüleme türünü <code>display: inline</code> 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.</p>

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

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>

<p>İlerleyen derslerde esnek düzen gibi kavramlarla karşılaşacaksın; şimdilik hatırlanması gereken en önemli şey, <code>display</code> 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.</p>

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

<h2 id="CSS_kutu_modeli_nedir">CSS kutu modeli nedir?</h2>

<p>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.</p>

<h3 id="Bir_kutunun_parçaları">Bir kutunun parçaları</h3>

<p>Bir blok kutu oluşturabilmek için, CSS'in bize verdikleri:</p>

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

<p>Aşağıdaki şema bu katmanları göstermektedir:</p>

<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>

<h3 id="Standart_CSS_kutu_modeli">Standart CSS kutu modeli</h3>

<p>Standart kutu modelinde, bir kutuya <code>width</code> ve <code>height</code> niteliklerine değer verirsen, bu <u><em>içeriğin</em></u> 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.</p>

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

<pre class="brush: css notranslate">.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}
</pre>

<p>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.</p>

<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>

<div class="blockIndicator note">
<p><strong>Not</strong>: 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.</p>
</div>

<h3 id="Alternatif_CSS_kutu_modeli">Alternatif CSS kutu modeli</h3>

<p>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)</p>

<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>

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

<pre class="brush: css notranslate"><code>.box {
  box-sizing: border-box;
} </code></pre>

<p>Tüm öğelerinin alternatif kutu modelini kullanmasını istiyorsan <code>box-sizing</code> özelliğini <code>&lt;html&gt;</code> öğ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,<a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">CSS'de Kutu Boyutlandırma Hakkındaki Püf Noktalar'a</a> bakın.</p>

<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

<div class="blockIndicator note">
<p><strong>Not</strong>: 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.</p>
</div>

<h2 id="Kutu_modelleriyle_oynamak">Kutu modelleriyle oynamak</h2>

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

<p><strong>İkinci kutunun boyutunu(<code>.alternate</code> sınıfına ekleyerek) ilk kutuyla eşleşecek şekilde değiştirebilir misin?</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>

<div class="blockIndicator note">
<p><strong>Not</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">Burada</a>, bu görev için bir çözüm bulabilirsin..</p>
</div>

<h3 id="Kutu_modelini_görüntüleyebilmek_için_tarayıcı_DevToolsu_kullanın">Kutu modelini görüntüleyebilmek için tarayıcı DevTools'u kullanın</h3>

<p><a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">Tarayıcı geliştirme araçlarıyla(developer tools)</a> 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.</p>

<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>

<h2 id="Kenar_boşluğu_dolgu_ve_kenarlıklar">Kenar boşluğu, dolgu ve kenarlıklar</h2>

<p>Yukarıda zaten {{cssxref("margin")}}, {{cssxref("padding")}}, ve {{cssxref("border")}}'ın ne şekilde kullanıldıklarını gördün. Bu örneklerde kullanılan nitelikler <strong>kısayollardır</strong> 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.</p>

<p>Şimdi bu nitelikleri daha detaylı inceleyelim.</p>

<h3 id="Kenar_boşluğumargin">Kenar boşluğu(margin)</h3>

<p>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.</p>

<p>{{cssxref("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:</p>

<ul>
 <li>{{cssxref("margin-top")}}</li>
 <li>{{cssxref("margin-right")}}</li>
 <li>{{cssxref("margin-bottom")}}</li>
 <li>{{cssxref("margin-left")}}</li>
</ul>

<p><strong>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.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>

<h4 id="Kenar_boşluğunun_daralması">Kenar boşluğunun daralması</h4>

<p>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.</p>

<p>Aşağıdaki örnekte iki paragrafımız var. Üst paragrafta <code>margin-bottom: 50px</code> olarak tanımlanmış. İkinci paragraf ise <code>margin-top: 30px</code> 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 <strong>50px</strong> kadar boşluk oluşmuştur.</p>

<p><strong><code>margin-top</code> 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 <code>bottom-margin: 50px</code> değeri korunur. Eğer <code>margin-top: -10px</code> olarak tanımlarsan aradaki boşluğun 40px olduğunu görürsün. 50px - 10px = 40px.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>

<p>Kenar boşluklarının ne zaman azalacağını ve ne zaman kapanmayacağını belirleyen birkaç kural vardır. Daha fazla bilgi için, <a href="/tr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">kenar boşluğu daraltmayla</a> 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.</p>

<div class="blockIndicator note">
<p><strong>Not:</strong> 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.</p>
</div>

<h3 id="Kenarlık">Kenarlık</h3>

<p>Kenarlık, kenar boşluğu ile kutunun dolgusu arasına çizilir. Standart kutu modelini kullanıyorsan, sınırın boyutu kutunun <code>width</code> ve <code>heigh</code> 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.</p>

<p>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.</p>

<p>{{cssxref("border")}} niteliği ile bu dört kenarlığın stilini, rengi ve genişliğini aynı anda ayarlayabilirsin.</p>

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

<ul>
 <li>{{cssxref("border-top")}}</li>
 <li>{{cssxref("border-right")}}</li>
 <li>{{cssxref("border-bottom")}}</li>
 <li>{{cssxref("border-left")}}</li>
</ul>

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

<ul>
 <li>{{cssxref("border-width")}}</li>
 <li>{{cssxref("border-style")}}</li>
 <li>{{cssxref("border-color")}}</li>
</ul>

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

<ul>
 <li>{{cssxref("border-top-width")}}</li>
 <li>{{cssxref("border-top-style")}}</li>
 <li>{{cssxref("border-top-color")}}</li>
 <li>{{cssxref("border-right-width")}}</li>
 <li>{{cssxref("border-right-style")}}</li>
 <li>{{cssxref("border-right-color")}}</li>
 <li>{{cssxref("border-bottom-width")}}</li>
 <li>{{cssxref("border-bottom-style")}}</li>
 <li>{{cssxref("border-bottom-color")}}</li>
 <li>{{cssxref("border-left-width")}}</li>
 <li>{{cssxref("border-left-style")}}</li>
 <li>{{cssxref("border-left-color")}}</li>
</ul>

<p><strong>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.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>

<h3 id="Dolgu">Dolgu</h3>

<p>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.</p>

<p>{{cssxref("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.</p>

<ul>
 <li>{{cssxref("padding-top")}}</li>
 <li>{{cssxref("padding-right")}}</li>
 <li>{{cssxref("padding-bottom")}}</li>
 <li>{{cssxref("padding-left")}}</li>
</ul>

<p><strong>Aşağıdaki örnekte bulunan <code>.box</code> 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.</strong></p>

<p><strong>Ayrıca <code>.container</code> 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.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>

<h2 id="Kutu_modeli_ve_satır_içi_kutular">Kutu modeli ve satır içi kutular</h2>

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

<p>Aşağıdaki örnekte, paragraf içerisinde bir adet <code>&lt;span&gt;</code> var. Bu satır içi kutuya <code>width</code><font><font>,<span> </span></font></font><code>height</code><font><font>,<span> </span></font></font><code>margin</code><font><font>,<span> </span></font></font><code>border</code><font><font>, ve<span> </span></font></font><code>padding</code> 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.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>

<div class="blockIndicator note">
<p>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.</p>
</div>

<h2 id="display_inline-block_kullanımı">display: inline-block kullanımı</h2>

<p><code>display</code> 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.</p>

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

<ul>
 <li><code>width</code> ve <code>height</code> nitelikleri uygulanır.</li>
 <li><code>padding</code>, <code>margin</code>, ve <code>border</code> nitelikleri diğer öğelerin kutudan uzağa itilmesine neden olur.</li>
</ul>

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

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

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>

<p>Bunun yararının görülebileceği bir örnek vermek gerekirse; <code>padding</code> uygulayarak daha büyük isabet alanına sahip bağlantı öğeleri eklemek isteyebiliriz. oysa <code>&lt;a&gt;</code> öğesi <code>&lt;span&gt;</code> gibi bir satır içi öğesidir ve <code>padding</code> istediğimiz gibi davranmayacaktır. Bunun için, <code>display: inline-block</code> 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.</p>

<p>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. <code>&lt;a&gt;</code> 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 <u>dolgu</u>, <code>&lt;ul&gt;</code> öğesinin üzerindeki kenarlık ile çakışıyor. Bunun nedeni, <code>&lt;a&gt;</code>'nın bir satır içi öğe olmasıdır.</p>

<p><strong><code>.links-list a</code></strong> <strong>seçicisine <code>display: inline-block</code> kuralını eklediğin de, dolgunun diğer öğeler tarafından dikkate alındığını ve bu sorunun giderildiğini göreceksin.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>

<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2>

<p>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 — <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Becerilerini test et: Kutu Modeli</a>.</p>

<h2 id="Özet">Özet</h2>

<p>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.</p>

<p>Bir sonraki derste, düz kutularının daha ilginç görünmesini sağlama için <a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">arka planların ve kenarlıkların</a> nasıl kullanılabileceğine bir göz atacağız.</p>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>

<h2 id="Bu_kısımda">Bu kısımda</h2>

<ol>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a>
  <ul>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li>
  </ul>
 </li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li>
</ol>