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
Anket
Son Konular
2012-03-22 19:47 - Geliştirdiğin kodları satmak ister misin
2012-02-12 23:21 - SMF forumu vbulletin foruma aktarmak
2011-12-14 21:50 - Motorlu araçlar otomobil vergisi sorgulama
2011-12-14 21:47 - Sorgulamalar
2011-12-11 14:33 - Ben az önce ne arayacaktım
2011-09-10 22:51 - DSLR Fotograf Makinası sınıflandırması
2011-09-09 17:33 - ‘Crop Factor’ Nedir, hakkında bilgi
2011-09-09 17:30 - Fotograf Rehberi
2011-08-20 21:30 - Samsung LEDTV'lerde .SRF ve XFS süprizi
2011-08-19 00:45 - 2011 yılının web tasarım trendleri
2011-04-09 20:18 - Alan adları gerçek isim sahiplerine verilecek!
2011-01-13 01:43 - SEO İçin Dikkat Edilmesi Gereken Hususlar
2011-01-13 01:42 - Meta tag SEO Optimization
2011-01-13 01:41 - Google Adsense Hakkında Detaylı Bilgi
2011-01-13 01:40 - Soru Ve Cevaplar ile Google Adsense
2011-01-13 01:39 - Arama motoru Google ve Pagerank
2011-01-13 01:38 - Seo Sözlüğü
2011-01-13 01:37 - Google Arama Özellikleri
2011-01-13 01:36 - Adsense Reklam Yerleşimi
2011-01-13 01:35 - Robots.txt Dosyası Kullanım Robotları Yölendirme Kontrol
2011-01-13 01:34 - Sitenizin Google ve Web deki Yeri
2011-01-13 01:33 - Arama Motoru Bilgi ve İpuçları
2011-01-13 01:31 - Arama Motorları Teknikleri
2011-01-13 01:29 - Google Pagerank Detaylı Anlatım
2011-01-13 01:27 - Sitenize Ziyaretçiler En Çok Hangi Kelimeler İle Gelmiş
2011-01-13 01:25 - Pagerank Nedir?
2011-01-13 01:19 - Fireworks Shadow and Glow
2011-01-13 01:18 - Fireworks Sharpen
2011-01-13 01:16 - Fireworks Other
2011-01-13 01:13 - Fireworks Blur
2011-01-13 01:09 - Fireworks Bevel and Emboss
2011-01-13 01:05 - Fireworks Adjust Color
2011-01-13 01:03 - Fireworks Save as Style
2011-01-13 00:58 - Fireworks Text Menüsü
2011-01-13 00:54 - Fireworks Select Menüsü
2011-01-13 00:54 - Fireworks Modify Menüsü
2011-01-13 00:51 - Fireworks View Menüsü
2011-01-13 00:18 - Fireworks Edit Menüsü
2011-01-13 00:16 - Fireworks File Menüsü
2011-01-13 00:05 - İnternet - Web Tarayıcılar (Browser)
2011-01-13 00:04 - İnternet - Web Server Yazılımları
2011-01-13 00:03 - İnternet ve Web İlişkisi
2011-01-13 00:02 - İnternette Kullanılan Protokoller
2011-01-13 00:01 - İnternet - World Wide Web (WWW) Nedir?
2011-01-13 00:00 - İnternet - URL nedir?
2011-01-12 23:43 - İnternet Backorder Nedir?
2011-01-12 23:34 - İnternet - Virüs Nedir?
2011-01-12 23:32 - İnternet Paypal nedir? Nasıl Kullanılır?
2011-01-12 23:31 - İnternet - DNS Nedir?
Günün Konuları
c# . javascript . C . xmlhttprequest . xml . xmlhttprequest nedir . c# ile yazma . c# kod çalıştırma . while . c# kodları . integer . c# string . c# tipler . value . type . reference type . console . const . decimal . boolean . writelene . printf . include . scanf . ajax nedir . http . http istemleri . ajax örneği . ajax tarayıcı desteği . activexobject . ajax ile sunucuya istek göndermek . null . showhint . getxmlhttpobject . statechanged . ajax php örneği . ajax asp örneği . ajax html sayfası . c# doğuşu . c# programlama sanatı . c# atama işlemleri . c# kuralları . c# türlerin tanımlanması . int . programlama . c# program kodları . c# döngü . c# ile ekrana yazı yazdırmak . c# aritmetik . c# operatörler . c# int . casting . byte . c# console . c# konsoldan veri girişi . static void main . c# decimal veri tipi . c# kayar nokta verileri . IEEE . c# yazı biçimlendirme . currency . general . c# char . compareTo . equals . c# while döngüsü . c# for döngüsü . c# foreach döngüsü . döngüler . hata yakalama . catch . pperatörler . .net framework . delphi . c++ builder . write . c# deki string dönüşümler . C nedir . C fonkisyonlar . getch .
Yeni yorum gönder