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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
|
---
title: marjin
slug: Web/CSS/margin
tags:
- CSS
- CSS özelliği
- Referans
translation_of: Web/CSS/margin
translation_of_original: Web/CSS/margin-new
original_slug: Web/CSS/marjin
---
<div>{{CSSRef}}</div>
<h2 id="Özet">Özet</h2>
<p> </p>
<p><strong><code>Marjin</code></strong> CSS özelliği her dört kenarın kenar boşluğunu düzenler. Kısayol olarak diğer marjin özellikleri ile tek tek düzenlemenin önüne geçilir : {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} ve {{ Cssxref("margin-left") }}.</p>
<p>Eksi değerlere müsade edilir.</p>
<p>{{cssinfo}}</p>
<h2 id="Sözdizimi">Sözdizimi</h2>
<pre class="brush:css">/* Her dört kenara uygulanır */
margin: 1em;
/* dikey | yatay */
margin: 5% auto;
/* üst | yatay | alt */
margin: 1em auto 2em;
/* üst | sağ | alt | sol */
margin: 2px 1em 0 auto;
/* Genel değerler */
margin: inherit;
margin: initial;
margin: unset;
</pre>
<h3 id="Değer_Atamaları">Değer Atamaları</h3>
<p>Aşağıdaki gibi bir, iki, üç yada dörtlü değer atama:</p>
<dl>
<dt><code><length></code></dt>
<dd>Sabit değerleri ifade eder. Eksi değer alabilir. Örnek ölçü birimleri için bakınız {{cssxref("<length>")}} .</dd>
<dt><code><percentage></code></dt>
<dd>{{cssxref("<percentage>")}} içinde bulunduğu bloğun <strong>width</strong> özelliğine orantılıdır. Eksi değerlere müsade edilir.</dd>
<dt><code>auto</code></dt>
<dd><code>auto kullanıldığında değerleri otomatik atanır. Blok elementleri merkeze konumlandırmada kullanılır.</code><br>
<code>div { width:50%; margin:0 auto; }</code> div bloğunu yatay olarak merkeze konumlandırır.</dd>
</dl>
<ul>
<li><strong>Tek</strong> bir değer <strong>tüm dört kenara uygulanır</strong>.</li>
<li><strong>İki</strong> değerin ilki <strong>üst ve alt kenara</strong> ikincisi <strong>sağ ve sol kenara uygulanır</strong>.</li>
<li><strong>Üç </strong> değerin ilki <strong>üst </strong>kenara ikincisi <strong>sağ</strong> ve <strong>sol</strong> kenara üçüncüsü <strong>alt</strong> kenara uygulanır.</li>
<li><strong>Dört değer</strong> <strong>üst, sağ, alt </strong>ve<strong> sol kenarlara</strong> sırasıyla (saat yönünde) uygulanır.</li>
</ul>
<h3 id="Formel_sözdizimi">Formel sözdizimi</h3>
{{csssyntax}}
<h2 id="Örnekler">Örnekler</h2>
<h3 id="Basit_bir_örnek">Basit bir örnek</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div class="ex1">
margin: auto;
background: gold;
width: 66%;
</div>
<div class="ex2">
margin: 20px 0 0 -20px;
background: gold;
width: 66%;
</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; highlight:[2,7]">.ex1 {
margin: auto;
background: gold;
width: 66%;
}
.ex2 {
margin: 20px 0px 0 -20px;
background: gold;
width: 66%;
}</pre>
<p>{{ EmbedLiveSample('Simple_example') }}</p>
<h3 id="başka_bir_örnek_daha">başka bir örnek daha</h3>
<pre class="brush: css">margin: 5%; /* tüm kenarlar 5% marjinli */
margin: 10px; /* tüm kenarlar 10px marjinli */
margin: 1.6em 20px; /* üst ve alt 1.6em, sağ ve sol 20px marjinli */
margin: 10px 3% 1em; /* üst 10px, sağ ve sol 3%, alt 1em marjinli */
margin: 10px 3px 30px 5px; /* üst 10px, sağ 3px, alt 30px, sol 5px marjinli */
margin: 1em auto; /* 1em marjin üst ve altta, çerçeve yatay olarak merkezde */
margin: auto; /* çerçeve yatay olarak merkezde üst ve alt marjin 0 */
</pre>
<h2 id="Yatay_olarak_merkeze_konumlama_margin_0_auto">Yatay olarak merkeze konumlama <code>margin: 0 auto;</code></h2>
<p>Modern tarayıcılarda yatay merkez konumlandırma için <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> kullanınız.</p>
<p>Bununla birlikte, eski tarayıcılarda IE8-9 gibi, bu tanımlama kullanılamaz. Yatay merkez konumlama için elementi kapsayan elemente marg<code>in: 0 auto; kullanınız.</code></p>
<h2 id="Spesifikasyonlar">Spesifikasyonlar</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>Belirgin değişiklik yok</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>"margin" transitions ta animasyon özellikiği kullanılabilir</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Inline elementeki efekleri kaldırıldı</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>başlangic değeri atandı</td>
</tr>
</tbody>
</table>
<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>3.0</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
<tr>
<td><code>auto</code> value</td>
<td>1.0</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>6.0 (strict mode)</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>6.0</td>
<td>6.0</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2>
<ul>
<li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Marjin çakışması</a></li>
</ul>
|
