CSS ile Dış Kenar Boşluğu



HTMLde nesnelerin diğer
nesnelere olan konumunu, dışkenar boşlukları ile belirleyebiliriz. Her
nesnenin bir sınır çizgisi olduğu gibi, sınır çizgisinin dışında bir
boşluk da vardır; ancak bu boşluğun varsayılan değeri sıfırdır. Bu
dersimizde bu boşluğu margin özelliği ile ifade edeceğiz.

Dışkenar Boşluk Değeri
margin özelliğine vereceğimiz değerler şu şekillerde olabilir:

auto Dışkenar boşluğunu gözatıcı (browser ) otomatik olarak belirler.
margin: auto
birim Dışkenar boşluğunun CSS birimleriyle ifade edilmesidir.
margin: 12px, margin:1cm, vb.
yüzde oranı Dışkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.
margin: 20%

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

Kod Alanı:<html>
<head>
<title>Dışkenar boşlukları,</title>
</head>
<body>

<p>Dışkenar boşlukları:</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm">Tek değer.</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm 20px">İki değer.</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm 20px 10%">Üç değer.</p>
<p style="border-style: solid; border-width: 2px; margin: 1cm 20px 10% auto">Dört değer.</p>

</body>
</html>

Öğretici uygulamamızda dışkenar boşluklarının daha iyi
gözlenebilmesi amacıyla, sınır çizgileri 2px (piksel ) kalınlıkta
tasarlandı. (Sınır çizgilerini belirtmek gibi bir zorunluluk yoktur. )
Uygulamamızda görüldüğü üzere, ilk nesnemizin dışkenar boşluğu 1 cm.
İkinci nesnemizin üst ve alt dışkenar boşluklar 1 cm, sol ve sağ
dışkenar boşluklar 20 piksel. Üçüncü nesnemizin üst dışkenar boşluğu
yine 1 cm, sol ve sağ dışkenar boşluğu 20 piksel, alt dışkenar boşluğu
ise sayfanın onda biri (10% ) kadar. Son nesnemizin üst dışkenar boşluğu
1 cm, sağ dışkenar boşluğu 20 piksel, alt dışkenar boşluğu sayfanın
onda biri kadar ve sol dışkenar boşluğu ise gözatıcının (browserın )
atadığı otomatik değer kadardır.

CSSde üst, alt, sol ve sağ dış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:

margin-top Üst dışkenar boşluğunu ifade eder.
margin-top: 15%
margin-left Sol dışkenar boşluğunu ifade eder.
margin-left: 25mm
margin-bottom Alt dışkenar boşluğunu ifade eder.
margin-top: auto
margin-right Sağ dışkenar boşluğunu ifade eder.
margin-top: 30px

Favorilerine al ya da arkadaşlarınla paylaş:
  • Delicious
  • Digg
  • StumbleUpon
  • Propeller
  • Reddit
  • Magnoliacom
  • Newsvine
  • Furl
  • Facebook
  • Google
  • Yahoo
  • Technorati
  • Icerocket

Yeni yorum gönder

Bu alanın içeriği gizli tutulacak ve açıkta gösterilmeyecektir.
  • Web sayfası ve e-posta adresleri otomatik olarak bağlantıya çevrilir.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • Satır ve paragraflar otomatik olarak bölünürler.

Biçimleme seçenekleri hakkında daha fazla bilgi

CAPTCHA
Aşağıdaki resimde yer alan karakterleri kutucuğa doğru olarak yazınız
Image CAPTCHA
Enter the characters shown in the image.

Anket

Web sitesinde hangisi daha önemlidir:

Son Konular

2012-04-10 00:53 - Chrome Pili daha çabuk bitiriyor
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?