HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
css padding nedir
css padding kullanımı
css padding margin
css padding vs margin
css padding code
css padding class
css padding example
css in padding
css padding list
css padding ne işe yarar
css padding ne demek
css padding position
css padding style
css padding start
css padding select

CSS Padding(İç Boşluk)

CSS Padding(İç Boşluk)

Web sitenizin elemanları arasında nasıl boşluk bırakacağımızı bir önceki bölümde görmüştük. Bu bölümde ise elemanların kendi içlerinde nasıl boşluk bırakacağını göreceğiz. Bunu gerçek hayattan bir örnek ile açıklamak istiyorum. Böylece daha anlaşılır olacağına inanıyorum. Kendinizi evinizde bilgisayarın başında otururken hayal edinki muhtemelen zaten bu yazıyı bu durumda okuyorsunuz :). Siz bir elemansınız, bilgisayarda bir eleman, bulunduğunuz evde bir eleman. Sizin bilgisayar ile aranızda bir boşluk var. Bilgisayarla evin duvarları arasında bir boşluk var. Bu sayede dip dibe olmadan rahat bir şekilde konumlanıyorsunuz. Buna iç boşluk diyoruz.Sizin evin ise diğer evler yada sokaklar artık hangi elemanlar var ise onlar ile aralarında oluşturduğu boşluğa ise dış boşluk diyoruz. Böylece her eleman muntazam bir şekilde var olabiliyor. Bir örnekle çok iyi anlayacağınıza eminim.

1-Tek Satırda Kullanımı

Aynı örneği tek satırda da yapabiliriz. Sırasıyla üst, sağ, alt ve sol taraftan istediğiniz şekilde sırayı bozmadığınız sürece değer verebilirsiniz. Aşağıda gördüğünüz örnek ile yukarıda gördüğünüz örnek arasında hiçbir fark yoktur.

Css
p.paragraf_kutusu { /*p etiketine bağlı paragraf_kutusu isimli sınıf*/
border: 1px solid black;
background-color: lightblue;
padding: 50px 30px 50px 80px;
}
Html
<html>
<head>
</head>
<body>
<p class="paragraf_kutusu">
Bu bir paragraf yani bir web sitesi elemanı. Bu nedenle diğer elemanlardan ayrılmalı. Etraflarına yeterince boşluk değeri vermeliyiz.
Üstten 50px, soldan 80px, alttan 50px, sağdan 30px boş bıraktık. Daha iyi anlamanız içinde paragraf kutumuza çizgi ekledik.
p>
</body>
</html>

2-Üç Değerli Uzaklık

Bir diğer kısa kullanım şeklimiz. Üst, sağ-sol, alt şeklinde olan kullanımdır. Bunu sağ ve soldan eşit üst ve alttan farklı boşluk değerleri vermek istediğimizde kullanırız.

Css
p.paragraf_kutusu { /*p etiketine bağlı paragraf_kutusu isimli sınıf*/
border: 1px solid black;
background-color: lightblue;
padding: 25px 50px 75px;/*üstten, sağ ve soldan, alttan*/
}
Html
<html>
<head>
</head>
<body>
<p class="paragraf_kutusu">
Bu bir paragraf yani bir web sitesi elemanı. Bu nedenle diğer elemanlardan ayrılmalı. Etraflarına yeterince boşluk değeri vermeliyiz.
Üstten 25px, sağdan ve soldan 50px, alttan 75px boş bıraktık. Daha iyi anlamanız içinde paragraf kutumuza çizgi ekledik.
</p>
</body>
</html>

3-İki Değerli Uzaklık

Üst ve alt için tek değer, sağ ve sol için tek değer vereceğimiz kullanım şeklidir.

Css
p.paragraf_kutusu { /*p etiketine bağlı paragraf_kutusu isimli sınıf*/
border: 1px solid black;
background-color: lightblue;
padding: 25px 50px 75px;/*üstten, sağ ve soldan, alttan*/
}
Html
<html>
<head>
</head>
<body>
<p class="paragraf_kutusu">
Bu bir paragraf yani bir web sitesi elemanı. Bu nedenle diğer elemanlardan ayrılmalı. Etraflarına yeterince boşluk değeri vermeliyiz.
Üst ve alt 25px, sol ve sağ 50px boş bıraktık. Daha iyi anlamanız içinde paragraf kutumuza çizgi ekledik.
</p>
</body>
</html>

4-Tek Değerli(Her yönden) Uzaklık

Elemana her yönden aynı uzaklıkta değer verdiğimiz kullanım şeklidir. Yani eleman her yönden içinde bulunduğu diğer elementlere karşı eşit uzaklıkta boşluğa sahip olacaktır.

Css
p.paragraf_kutusu { /*p etiketine bağlı paragraf_kutusu isimli sınıf*/
border: 1px solid black;
background-color: lightblue;
padding: 25px 50px 75px;/*üstten, sağ ve soldan, alttan*/
}
Html
<html>
<head>
</head>
<body>
<p class="paragraf_kutusu">
Bu bir paragraf yani bir web sitesi elemanı. Bu nedenle diğer elemanlardan ayrılmalı. Etraflarına yeterince boşluk değeri vermeliyiz.
Her yönden 25px boş bıraktık. Daha iyi anlamanız içinde paragraf kutumuza çizgi ekledik.
</p>
</body>
</html>


Paylaş:

Enes KILIÇ
Webmaster