Dış kenar boşluğu
Dış kenar boşluğu
Dış kenar boşluğu, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 1 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 1 dersten oluşur.
Giriş
Margin, CSS'teki en önemli konulardan biridir.
Margin'ler, bir öğenin sınırlarının çevresinde oluşturduğumuz boşluklardır.
Margin Kenarlarının Açıklanması
Margin oluştururken öğenin türü ne olursa olsun, bunu 4 yönlü (üst, sağ, alt ve sol) olarak düşünmemeliyiz.
<style>
.box{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
width:100px;
height:100px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
<div class="box">Box with margin</div>Uyarı
margin değerine belirli bir değer verebildiğimiz gibi yüzde değeri de verebiliriz.
Uyarı
Margin değerine belirli bir değer verebildiğimiz gibi yüzde cinsinden bir değer de verebiliriz.
Margin kısa yazımı
Önceki örneğimizde bir kutunun tüm kenarlarına margin vermek için 4 satır kod yazmamız gerekiyordu.
CSS, daha kısa kod yazabilmemiz için bir margin kısaltması sunar.
Margin özelliğini tanımladıktan sonra değerlerimizi aralarında boşluk bırakarak sırasıyla üst, sağ, alt ve sol için atayabiliriz (yani saat yönünde).
<style>
.box {
margin: 10px 10px 10px 10px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
Negatif margin hakkında uyarı
Margin'ler negatif bir değer alabilir. Bir sonraki derste göreceğimiz padding'ler ise negatif değer alamaz.
margin auto
Öğelerimizi yatay olarak ortalamak için margin özelliğinin auto değerini kullanacağız. Ekran çözünürlüğü ne olursa olsun öğe yatay olarak ortalanır.
Ekranın 1200px olduğunu varsayalım. Öğemiz 400px genişliğinde olsun. Öğemiz, solunda ve sağında 400px boşluk kalacak şekilde ortalanır.
<style>
.box {
width:200px;
margin: auto;
background-color: powderblue;
}
</style>
<div class="box">
This element will be horizontally
centered because
it has margin: auto;
</div>Tebrikler
Tebrikler 🎉
Bu bölümde CSS Margin'lerini öğrendik.
Bir sonraki bölümde CSS Padding'lerini öğreneceğiz.
Sıkça Sorulan Sorular
“Dış kenar boşluğu” dersi ücretsiz mi?
Evet — “Dış kenar boşluğu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 1 dersten oluşur.
“Dış kenar boşluğu” dersinde ne öğreneceğim?
Dış kenar boşluğu HTML for Kids ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 1 dersinin 1. dersidir.
“Dış kenar boşluğu” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML for Kids dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML for Kids dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.