1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
---
title: Kutu modeli
slug: Web/CSS/box_model
tags:
- CSS
- Kutu Modeli
translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
---
<h2 id="Özet">Özet</h2>
<p>Bir döküman içerisinde, her eleman bir dikdörtgen kutu şeklinde sunulur. Bu kutuların boyutları, özellikleri — örneğin renkleri, arkaplanı, border görünümü — ve pozisyonlarını belirlemek, rendering motorunun görevidir.</p>
<p>CSS içinde, tüm bu dikdörtgen kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanırlar Bu model, elemanın içeriğinin kaplayacağı alanı tanımlar. Her kutunun dört kenarı bulunur: <strong>margin kenarı</strong>, <strong>border kenarı</strong>, <strong>padding kenarı</strong> ve <strong>içerik kenarı</strong>.</p>
<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/11171/boxmodel-%283%29.png" style="height: 384px; width: 548px;"></p>
<p><a name="content"></a><strong>İçerik alanı, </strong>gerçekten elemanın içeriğinin kapladığı alandır. Sıklıkla bir backgroundu, rengi veya imajı bulunur ve içerik kenarından iç kısımda yer alır, ebatları içerik genişliği veya içerik-kutu genişliği ve içerik yüksekliği veya içerik-kutu yüksekliğidir.</p>
<p>Eğer CSS'in {{ cssxref("box-sizing") }} özelliği varsayılan olarak ayarlandıysa, CSS özellikleri {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} ve {{ cssxref("max-height") }} içerik boyutunu kontrol eder.</p>
<p><a name="padding"></a><strong>Padding alanı </strong>borderın etrafını içeriden çevreleyen bir dolgu şeklinde genişler. İçerik alanı background, renk ya da imaj barındırıyorsa bunlar da padding'in içine doğru genişler, bu sayede paddingin içeriği genişleten bir olgu olduğunu düşünebilirsiniz. Padding, padding kenarının içinde yer alır ve ebatları padding-box genişliği ve padding-box yüksekliğidir.</p>
<p>Padding kenarı ve içerik arasındaki boşluk {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} CSS özellikleri ve {{ cssxref("padding") }} CSS kısa yazım biçimi ile kontrol edilir.</p>
<p><a name="border"></a><strong>Border alanı </strong>padding alanını<strong> </strong>border içeren alanı kullanarak genişlerit. Border kenarı içindeki alandır ve ebatları border-box genişliği ve border-box yüksekliği olarak tanımlanır. Bu alan borderın {{ cssxref("border-width") }} özelliği veya {{ cssxref("border") }} kısa yazımı kullanılarak belirlenir.</p>
<p><a name="margin"></a><strong>Margin alanı </strong>border alanını boş alana doğru genişletir ve elemanları komşu elemanlardan ayırmak için kullanılır. Bu alan <em>margin kenarı </em>içindeki alandır, ve ebatları margin-box genişliği ve margin-box yüksekliğidir.</p>
<p>Margin alanının boyutları {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} ve {{ cssxref("margin") }} kısa yazımı CSS özellikleri kullanılarak kontrol edilir.</p>
<p><a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a> oluştuğunda, margin alanları kutular arasında paylaştırılmadıkça düzgün bir şekilde tanımlanmış olmaz.</p>
<p>Son olarak, unutmayın ki, özelliği değiştirilmemiş inline elemanlar için, içeriğin etrafında görsel olarak border ve padding görünse bile, kaplanacak alan miktarını (satırın yüksekliğine destek olarak) belirleyen özellik CSS'in {{ cssxref('line-height') }} özelliğidir.</p>
<h2 id="Özellikleri">Özellikleri</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Özellik</th>
<th scope="col">Durum</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>
<p>Tamamen daha fazla tanımlaması bulunsa da pratikte değişiklik bulunmuyor</p>
</td>
</tr>
<tr>
<td>{{ SpecName("CSS1","#formatting-model")}}</td>
<td>{{ Spec2('CSS1') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Bunlara_da_bakın">Bunlara da bakın</h2>
<ul>
<li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
<li>{{ CSS_key_concepts() }}</li>
<li>İlgili CSS özellikleri: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li>
</ul>
|
