0Pricing
HTML for Kids · Ders

İç kenar boşluğu

İç kenar boşluğu

İç 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ş

Merhaba,

CSS Padding dersine hoş geldiniz.

HTML öğemizin sınırları içinde boşluk oluşturmak için kullanılır.

Margin'de olduğu gibi öğeye 4 yönlü padding ekleyebiliriz.

Yüzde Türü

Önceki örneğimizde px türünde sabit bir değer alan bir padding değeri atamıştık. Margin'de olduğu gibi yüzde türünde bir değer de belirleyebiliriz.

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  background-color: lightblue;
  padding-top:10%;
  padding-right: 10%;
  padding-left: 10%;
  padding-bottom:10%;
  border: 1px solid black;
}
</style>
</head>
<body>

<div class="box">
    We assign percentage type 
     padding to this div element.
</div>

</body>
</html>
İç kenar boşluğu — resim 2

Kodu kısaltmak için

Margin'de olduğu gibi, padding için kısa yazım söz dizimini kullanarak tek satırda tanımlamak mümkündür.

Üst, sağ, alt ve sol padding değerleri, aralarında boşluk bırakılarak sırasıyla eklenebilir.

Örnek kodumuzu inceleyin; margin'e çok benzediğini göreceksiniz.

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  border: 1px solid black;
  padding: 20px 10px 25px 10px;
  background-color: powderblue;
}
</style>
</head>
<body>

<div class="box">
   Lorem ipsum dolor sit amet, 
   consectetur
</div>

</body>
</html>

Tebrikler

Tebrikler 🎉

Bu bölümde CSS Margin'lerini öğrendik.

Bir sonraki bölümde Renk ve Arka Plan konusunu öğreneceğiz.

İç kenar boşluğu — resim 4

Sıkça Sorulan Sorular

“İç kenar boşluğu” dersi ücretsiz mi?

Evet — “İç 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.

“İç kenar boşluğu” dersinde ne öğreneceğim?

İç 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.

“İç 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.

← HTML for Kids Sayfasına Dön