sync translated content

1 files changed, 87 insertions, 0 deletions

diff --git a/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html b/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html
new file mode 100644
index 0000000000..947424114f
--- /dev/null
+++ b/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html
@@ -0,0 +1,87 @@
+---
+title: 'Becerilerinizi test edin: Kutu Modeli'
+slug: orphaned/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks
+tags:
+  - Başlangıç
+  - CSS
+translation_of: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks
+original_slug: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks
+---
+<div>{{LearnSidebar}}</div>
+
+<div></div>
+
+<p>Bu görevin amacı, CSS Kutu Modeli hakkında anlayşınızı kontrol etmenize yardımcı olmaktır.</p>
+
+<div class="blockIndicator note">
+<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ayrıca kodu indirmek ve görevler üzerinde çalışmak için <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanmakta faydalı olabilir.</p>
+
+<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme veya daha fazla yardım")}} bülümüne bakabilirsiniz.</p>
+</div>
+
+<h2 id="Kutu_Model_Bir">Kutu Model Bir</h2>
+
+<p>Aşağıdaki iki kutudan biri standart kutu modeli, diğeri ise alternatif kutu modelini kullanıyor. .alternate sınıfına kurallar ekleyerek ikinci kutunun genişliğini , ilk kutunun görsel genişliğiyle eşleşecek şekilde değiştirin. İşin sonunda görseliniz aşağıdaki resim gibi görünmelidir.</p>
+
+<p><img alt="Two boxes of the same size" src="https://mdn.mozillademos.org/files/17126/mdn-box-model1.png" style="height: 851px; width: 792px;"></p>
+
+<p>Bitmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyin:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}</p>
+
+<div class="blockIndicator note">
+<p>Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">kaynak kodları</a> indirin.</p>
+</div>
+
+<h2 id="Kutu_Modeli_İki">Kutu Modeli İki</h2>
+
+<p>Bu görevde kutuya şunları ekleyin:</p>
+
+<ul>
+ <li>5px, siyah ve noktalı bir kenarlık.</li>
+ <li>20px üst kenar boşluğu.</li>
+ <li>1em sağ kenar boşluğu.</li>
+ <li>40px bir alt kenar boşluğu.</li>
+ <li>2em'lik bir sol kenar boşluğu.</li>
+ <li>her tarafına 1em'lik dolgu<img alt="A box with a dotted border" src="https://mdn.mozillademos.org/files/17127/mdn-box-model2.png" style="height: 261px; width: 1265px;"></li>
+</ul>
+
+<p>Örneği resimdeki gibi yeniden oluşturmak için aşağıdaki canlı kodu yeniden düzenleyin:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}</p>
+
+<div class="blockIndicator note">
+<p>Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/mbp-download.html">kaynak kodları</a> indirin.</p>
+</div>
+
+<h2 id="Kutu_Modeli_Üç">Kutu Modeli Üç</h2>
+
+<p>Bu örnekte, satıriçi öğenin bir kenar boşluğu, dolgusu ve kanarlığı vardır, ancak üstündeki ve altındaki çizgiler diğer öğelerin üzerine binmektedir. Öğeyi satır içinde tutarken kenar boşluğunun, dolgusunun ve kenarlığının boyutunun diğer satırlar tarafından dikkate alınmasını sağlamak için CSS'nize ne ekleyebilirsiniz.?</p>
+
+<p><img alt="An inline box with space between it and the text around it." src="https://mdn.mozillademos.org/files/17128/mdn-box-model3.png" style="height: 458px; width: 1264px;"></p>
+
+<p>Resimdeki görüntüyü oluşturabilmek için aşağıdaki kodu yeniden düzenleyin:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/inline-block-download.html">kaynak kodları</a> indirin.</p>
+</div>
+
+<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2>
+
+<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p>
+
+<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p>
+
+<ol>
+ <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li>
+ <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler:
+  <ul>
+   <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li>
+   <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li>
+   <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</li>
+   <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li>
+  </ul>
+ </li>
+</ol>