CSS de İç Kenar Boşluğu

İçkenar Boşluk Değeri

Özellikle tablolarda içkenar boşluklarının ayarlanması, tablo düzeni
için önemli bir işlemdir. CSSde dışkenar boşluklarını ifade etmek için
padding özelliğinden yararlanırız.



padding özelliğine vereceğimiz değerler şu şekillerde olabilir:



birim İçkenar boşluğunun CSS birimleriyle ifade edilmesidir.

padding: 12px, margin:1cm, vb.

yüzde oranı İçkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.

padding: 20%





Eğer padding özelliğine tek değer verirsek, tüm içkenar boşlukları
bu değeri alır. Eğer iki değer verirsek, üst ve alt içkenar boşlukları
ilk değeri, sol ve sağ içkenar boşlukları ikinci değeri alır. Eğer üç
değer verirsek, üst içkenar boşluğu ilk değeri, sol ve sağ içkenar
boşlukları ikinci değeri, alt içkenar boşluğu üçüncü değeri alır. Eğer
dört değer verirsek, üst içkenar boşluğu ilk değeri, sağ içkenar boşluğu
ikinci değeri, alt içkenar boşluğu üçüncü değeri, sol içkenar boşluğu
dördüncü değeri alır.



Kod Alanı:

<html>

<head>

<title>İçkenar boşlukları,</title>

</head>

<body>



<p>İçkenar boşlukları:</p>

<p style="background-color: red; padding: 1cm">Tek değer.</p>

<p style="background-color: red; padding: 1cm 20px">İki değer.</p>

<p style="background-color: red; padding: 1cm 20px 10%">Üç değer.</p>

<p style="background-color: red; padding: 1cm 20px 10% auto">Dört değer.</p>



</body>

</html>






Öğretici uygulamamızda içkenar boşluklarının daha iyi gözlenebilmesi
amacıyla, nesnemize (paragrafa ) arkaplan rengi verildi. Uygulamamızda
görüldüğü üzere, ilk nesnemizin içkenar boşluğu 1 cm. İkinci nesnemizin
üst ve alt içkenar boşlukları 1 cm, sol ve sağ içkenar boşlukları 20
piksel. Üçüncü nesnemizin üst içkenar boşluğu yine 1 cm, sol ve sağ
içkenar boşlukları 20 piksel, alt içkenar boşluğu ise sayfanın onda biri
(10% ) kadar. Son nesnemizin üst içkenar boşluğu 1 cm, sağ içkenar
boşluğu 20 piksel, alt dışkenar boşluğu sayfanın onda biri kadar ve sol
içkenar boşluğu ise gözatıcının (browserın ) atadığı otomatik değer
kadardır.



CSSde üst, alt, sol ve sağ içkenar boşluklarını ayrı ayrı ifade
etmek de mümkündür. Bu özelliklere de aynı şekilde değer verilir.
Aşağıda bu özellikler ve açıklamaları görülmektedır:



padding-top Üst içkenar boşluğunu ifade eder.

padding-top: 15%

padding-left Sol içkenar boşluğunu ifade eder.

padding-left: 25mm

padding-bottom Alt içkenar boşluğunu ifade eder.

padding-top: auto

padding-right Sağ içkenar boşluğunu ifade eder.

padding-top: 30px


EğitimCSScss ickenar boslugucss içkenarcss nedir
CSS Dersleri

Ara

Eğitim


Konular

Tags

Hanci.org sizlere daha iyi hizmet sunmak için çerezleri kullanıyor.
Hanci.org sitesini kullanarak çerez politikamızı kabul etmiş olacaksınız.
Detaylı bilgi almak için Gizlilik ve Çerez Politikası metnimizi inceleyebilirsiniz.