Bu işi aslında resim ile de yapabiliriz, belki daha kolayımıza bile gelir, ancak uygulamadan birçok yerde ve farklı renklerde 1 piksellik yuvarlak kenara ihtiyaç duyunca bu yöntemi tercih ettim.

Yöntemi şöyle anlatabilirim;  bu çözümü üretmek için iki adet içiçe blok-level elemente ihtiyacımız var, dıştaki elemanı üstten ve alttan bir piksel fazlalık eklerken, içteki elemanı sağ ve soldan eksi margin değeri vererek sağ ve solda taşırarak 1 piksellik bir yuvarlak kenar elde ederiz. Bu işlemi iki şekilde yapabiliriz.

Padding ve margin yardımı ile oluşturmak

HTML kodu

<div class="kutu1">
	<p>{ CSS, XHTML ve Javascript }</p>
</div>

CSS kodu

.kutu1{
	background:#3274D0;
	margin:0 1px;
	padding:1px 0;
}
	.kutu1 p{
		background:#3274D0;
		margin:0 -1px;
		padding:2px;
	}

Örneği görmek için tıklayınız.

Margin ve border yardımı ile oluşturmak

HTML Kodumuz yine aynı

<div class="kutu1">
	<p>{ CSS, XHTML ve Javascript }</p>
</div>

CSS kodumuz

.kutu1{
	background:#848484;
	border:1px solid #848484;
	border-left-width:0;
	border-right-width:0;
	margin:0 1px;
}
	.kutu1 p{
		background:#d3d3d3;
		border:1px solid #848484;
		border-top-width:0;
		border-bottom-width:0;
		margin:0 -1px;
		padding:2px;
	}

Örneği görmek için tıklayınız.

Butonlarda kullanımı

Bu yöntemleri butonlarımızda da kullanabiliriz.

HTML Kodumuz

<ul>
	<li><a href=""><span>Bursaspor</span></a></li>
    <li><a href=""><span>Trabzonspor</span></a></li>
    <li><a href=""><span>Kayserispor</span></a></li>
</ul>

CSS kodumuz

ul{margin:0; padding:0; width:250px}
ul li{ list-style: none; margin-bottom:5px}
	ul li a{display:block; background:#3274D0; margin:0 1px; padding:1px 0; position: relative; text-decoration:none;}
		ul li a span{background:#3274D0; margin:0 -1px; padding:2px; display: block; color:#fff}
	ul li a:hover{background:#fff;}
		ul li a:hover span{background:#fff; color:#3274D0}

Örneği görmek için tıklayınız.

Sonuç olarak yukarıda görüldüğü gibi kolay bir kodlama ile 1 piksellik bir yuvarlak kenar elde ettik. Çok fazla çeşitte 1 piksellik yuvarlak kenara ihtiyaç duyduğunuzda imdadınıza yetişir. Bu kodun güzelliği internet explorer sürümlerinde(6,7,8,9) herhangi bir ek koda gereksinim duymadan çalışmasıdır. Bu yöntem aklınızın bir köşesinde kalsın bakarsınız bir gün lazım olur.

Hadi kalın sağlıcakla.

Kaynaklar

• http://dmitry-baranovskiy.tumblr.com/post/34061791/one-pixel-rounded-corners
• http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.html
• http://www.onderhond.com/blog/work/1px-rounded-corners
• http://www.alistapart.com/articles/mountaintop/

Ben genelde bu sorun ile özel textbox alanlarını kodlarken karşılaşıyorum.

yukarıdaki gibi bir tasarımı koda çevirirken

<div class="dis">
    <div class="ic"><input type="text" value="Arama" /></div>
</div>

CSS kodu

div.dis{
	margin-left:65px;
}
div.ic{
    width:241px;
    height:25px;
    background:url(arama_ardalan.gif) 0 0 no-repeat
}
div.ic input{
    border:0;
    background:none;
    width:204px;
    margin:4px 0 0 5px;
    font-size:11px;
    color:#534013;
}

Örneği görmek için tıklayınız.

Böyle bir kod yazıyorum. Dıştaki div(div.dis) herhangi bir kapsayıcı div olarak düşünün. Sayfanın diğer bir öğesi yani bu arama kısmı ile alakası yok. Bu kapsayıcı katmandaki margin tanımı ie’de sorun çıkarıyor.

Firefox’da yukarıdaki gibi bir görüntü alırken

İnternet Explore 6 ve 7 sürümlerinde yukarıdaki gibi bir görüntü ile karşılaşıyorum. En dıştaki katmana atadığım margin-left değeri içerideki elemanımı etkiliyor. Kalıtsal olarak bu değeri alıyor. Sorunu ilk önce "IE’da İkikat görülen Margin Problemi ve Çözümü" anlattığım gibi bir sorun olduğunu düşündüm ama değildi. Bu sefer ki farklı bir sorun. positioniseverything.net sitesinde aynı sorunu görünce anca adını koyabildim.

Sorun; input alanını kapsayan ebeveyn elemanda hasLayout ve margin tanımı var ise oluyor. Kaynak kısmında verdiğim sitede bir kaç çözüm önerisi var. Ancak ben hasLayout sorunlarının en kolay çözüm yolu olan zoom:1 tanımı ile bu sorunu aştım. Margin tanımı olan elemana zoom:1 tanımı yapınca sorun çözüldü

div.dis{ margin-left:65px; zoom:1}

Örneği görmek için tıklayınız.

Bu sorun tüm input çeşitlerinde(text, checkbox, radyo buton ve resim) meydana geliyor, ayrıca textarea’da yaşanıyor bu sorun, ancak select elemanında bu sorun ile karşılaşılmıyor.

Kaynak

• http://www.positioniseverything.net/explorer/inherited_margin.html

Eksi margin’li değerler bize görsel olarak avantaj sağlar, kodlamamıza yardımcı olur örneğin esnek yapılı sayfaları düzenlememizde ve bir elemanın çizgileri dışına taşırma işlemlerinde.

Eksi margin kullanımı bir hile değildir, CSS’in desteklediği normal bir değerdir.

Eksi margin bir çok yerde kullanıyoruz. Ancak biraz bilinçsiz kullanıyoruz. Ben burada çizgileri belirleyip ona göre hareket etmeyi düşündüm ve bu yazı ortaya çıktı. Eksi marginleri yakından tanıyalım.

Eksi Margin’i iki yerde uygularız.

• Sabit konumlandırılmış elemanlarda
• Float uygulanmış elemanlarda

1- Sabit Elemanlar ve Eksi Margin

1.1. Ard Arda Statik Elemanlar

Herhangi bir konumlandırma ataması yapılmayan tüm elemanlar sabit konumlandırılmıştır.

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

<div id="kutu1"></div>
<div id="kutu2"></div>

Örnke kodu görmek için tıklayınız.

Normal akış içindeki iki kutu bir birini takip eder. Biz burada birinci kutuya eksi margin atarsak örneğin alttan -20px gibi.

Alttaki kutuyu kendi üzerine doğru 20px çekecektir.

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    margin-bottom:-20px
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Eğer ikinci kutuya yukarıdan eksi margin verirsek

#kutu1 {
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}

#kutu2 {
    width: 200px;
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin-top:-20px
}

Örnke kodu görmek için tıklayınız.

Aynı görüntüyü alırız. Burada bu örneği vermemin amacı, eksi değer üst ve soldan verilirse eleman kendini yukarı veya sola çekecektir. Ancak elemana sağ ve alt eksi değeri verildiğinde kendi yerinden oynamazken ilişkili elemanı kendine doğru çekecektir. Yani üst/sol eksi değerlerde kendi hareket ederken, alt/sağ eksi değerlerde diğer elemanları kendine çekiyor.

1.2. Başlıklar ve içerikler Arasındaki mesafeyi Ayarlamak İçin Eksi Margin kullanmak

Başka bir örnek yapalım. Genelde sitelerin içeriklerini girerken başlık ve içerik şeklinde gireriz. Başlıklar için h1, h2, h3, h4, h5, h6 kullanırız. Bu bize arama motorları içinde avantaj sağlar. 

Normal bir içerik ve başlık kullanımına örnek verelim.

<p>Integer sagittis ... elementum. </p>
<h1>Donec id ultricies mi.</h1>
<p>Lorem ipsum ... eros.</p>

Görünüm aşağıdaki gibi olacaktır

Genel kullanımda başlık ile içerik arasındaki boşluk, başlık ile üst elemanlarda ile olandan daha azdır. Biz bunu sağlamak için h1′e margin-bottom:0 değeri versek de yeterli gelmez. Paragrafın(p) üst margin değeri aradaki mesafeyi açık gösterecektir. Bu durumu engellemek için başlıktan sonra gelen paragraflara bir sınıf atayıp bu paragrafların margin-top değerini düşürmeliyiz veya sıfırlamalıyız.

Bir başka çözüm yolu ise ki bu daha kolaydır ve genelde tercih edilir. Başlık etiketinin alt margin değerine eksi değer vererek paragraf yaklaştırılır. 

h1{
    margin-bottom:-20px
}

1.3. Statik elemanlarda bir başka durumda kutuların iç içe olma durumunda vardır.

#kutu1 {
    width:200px;
    height: 130px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px
}

<div id="kutu1">
    <div id="kutu2"></div>
</div>

İçteki kutuya sağdan ve soldan eksi değerler verdiğimizde dış kutunu genişliğini otomatik olarak alan içerideki kutu sağ ve soldan verilen eksi kenar dışı boşluk değerleri kadar dışa taşacaktır.

Örnke kodu görmek için tıklayınız.

Ancak burada farklı tarayıcılarda farklı sorunlarımız ortaya çıkacaktır. ie6 da her iki yana taşan kısımlar gözükmezken, ie7′de sadece sağ kısım görünmemektedir.

ie7′de yukarıdaki gibi görünüyor.

ie6′da ise yukarıdaki gibi görünmektedir.

Bu durumu düzeltmek için düzeltme kodu yazmalıyız. ie7 için min-height:0 tanımı yeterlidir.

#kutu1 {
    width:200px;
    height: 130px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    height: 100px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px;
    min-height:0
}

ie6 için ise daha farklı bir kod yazmalıyız.

#kutu1 {
    width:200px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -20px;
}
* html #kutu2{
    position:relative;
    height:1px
}

Örnke kodu görmek için tıklayınız.

Bu kodlama sayesinde tüm tarayıcılarda aynı sonucu elde ederiz. Bu örnekten şu sonucuda çıkarabiliriz; genişliği verilmeyen elemanlarda eksi margin eleman genişliğini arttırır, bir bakıma padding görevi görür.

2- Eksi Margin ve Float

Float uygulanmış iki elemanı düşünelim.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

<div id="kutu1">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id ultricies mi.
</div>
<div id="kutu2">
	Etiam vel arcu nisl. Sed pharetra gravida diam sed mattis.
</div>

Birinci kutuya sağ eksi margin verdiğimizde

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    margin-right:-50px
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Birinci kutu ikinci kutuyu kendine doğru çekecektir. Birinci kutu genişliği ve konumunda herhangi bir değişiklik olmayacaktır.

Farklı durumlarda farklı sonuçlar çıkacaktır. Örneğin,

Birinci float:left ikinci kutu float:right değeri verdiğimizde iki kutu arasında herhangi bir eksi değer etki etmiyor.
Her ikisine float:right tanımladığımızda ise, soldan eksi margin değeri yukarıdaki etkiyi yapıyor.

Peki bu bilgi bizim ne işimize yaracak derseniz. http://www.alistapart.com/articles/negativemargins/ örnekteki gibi esnek yapılı bir sayfa planında sabit yapılı bir sağ veya sol alanlar oluşturmak istediğimizde yarar.

Örneğin %100 genişlikteki bir içerik alanımızı sağ yanına 200px lik bir sağ kolon eklemek istersek, yukarıdaki kodu devam ettirmemiz yeterli olacaktır.

#kutu1 {
    float:left;
    width: 100%;
    height: 100px;
    background-color:#e5ecf9;
    margin-right:-200px
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    background-color:#ffb4bf
}

<div id="kutu1">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id ultricies mi.</p>
</div>
<div id="kutu2">
	<p>Etiam vel arcu nisl. Sed pharetra gravida diam sed mattis.</p>
</div>

%100 içeriği sağ kolonun altında kalıyor. Bunu engellemek için içeriğindeki paragrafa sağ margin değeri atamalıyız.

#kutu1 p{
    margin-right:220px
}

Normalde 200px yeterli olacaktı ancak içerik ile sağ kolon arasına 20px lik bir mesafe koyarak birbirine yapışmasınıda engellemiş olduk.

Sağ ve sol kolon diye bir ayrım yapmak içinde soldaki kolonun ardalan rengini kaldırıp içindeki paragrafa vererek bu sorunu çözebiliriz.

#kutu1 {
    float:left;
    width: 100%;
    margin-right:-200px
}
#kutu1 p{
    margin:0 220px 0 0;
    height: 100px;
    background-color:#e5ecf9;
}
#kutu2 {
    float:left;
    width: 200px;
    height: 80px;
    background-color:#ffb4bf
}

Örnke kodu görmek için tıklayınız.

Float uygulanmış iç içe elemanlara eksi margin uygulamak

Yukarıda yan yana elemanlardaki durumu gösterdik peki iç içe elemanlarda eksi margin kullanımda nasıl sonuçlar çıkacaktır.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:right;
    width: 50px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
}

  <div id="kutu1">
  <div id="kutu2">Donec id ultricies mi.</div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

Örnke kodu görmek için tıklayınız.

Birinci kutu içerisinde sağa hizalanmış ikinci kutuyu sağa doğru birinci kutu dışarısına çıkararak bir çok uygulamada işimizie yaracaktır.

#kutu1 {
    float:left;
    width: 200px;
    height: 100px;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
}
#kutu2 {
    float:right;
    width: 80px;
    height: 80px;
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin:10px -50px 0 0
}
* html #kutu2{
    position:relative;
}

Örnke kodu görmek için tıklayınız.

Bir başka uygulama şeklide

Bir içerik ve başlığı normal şekilde normal akış içerisinde iken

#kutu1 {
    float:left;
    border: 2px solid #659ad8;
    background-color:#e5ecf9;
    padding:0 20px
}
#kutu1 h2{
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
}

<div id="kutu1">
    <h2>Donec id ultricies mi.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor vehicula nisl, et tincidunt sapien venenatis quis. .. felis.</p>
</div>

Örnke kodu görmek için tıklayınız.

Ancak buradaki başlığı kutu dışına alarak farklı bir görünüm elde edebiliriz.

#kutu1 h2{
    border: 2px solid #cd8a93;
    background-color:#ffb4bf;
    margin-top:-20px
}

Örnke kodu görmek için tıklayınız.

ve tabi ie 6 için

* html #kutu1 h2{
	position:relative; height:1px
}

Eksi Margin Uygulamaları

• Konumlandırma(positioning) kullanılan elementlerin negatif margin ile ortalanması
• CSS ile gölge vermek

Ayrıca

Eksi margin Kullanarak çoklu kolon oluşturmak adlı güzel bir makale var.

Sonuç

Sonuç olarak eksi margin bir çok uygulamamızda kullanacağımız bir özellik. Genelde farklılıkları ile ön plana çıkan bir özelliktir. Ben burada eksi margin’i tanıttım ve genel bilinen uygulamalarını yaptım ve bir kaçına link verdim. Buradaki bilgiler ışığında daha bir çok uygulamamızda eksi margin’i kullanmaya devam edeceğiz.

Kaynaklar

• http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
• http://www.brunildo.org/test/NegMOutH.html
• http://csscreator.com/node/1703 (ie sorun düzeltme)
• http://www.communitymx.com/abstract.cfm?cid=B0029 (bilgi)
• http://www.alistapart.com/articles/negativemargins/ (Uygulama)
• http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/ (ayrıntılı bilgi)
• http://www.bennadel.com/blog/1174-Negative-CSS-Margins-Are-Not-Cool.htm (karşı çıkış)
• http://haslayout.net/css/negmargin (hata bilgisi)
• http://csscreator.com/node/28664 (küçük bilgi)
• http://www.simplebits.com/notebook/2005/05/23/negative.html (negatif margin kullanılcak bir örnek)
• http://www.severnsolutions.co.uk/twblog/archive/2004/07/01/cssnegativemarginsalgebra (negatif margin ile sayfa yapısı oluşturma)
• http://haslayout.net/css/Negative-Margin-Bug (negatif margin sorunları)

Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkanlar nispetinde 2. kitapta çıkacaktır.

Kitabı ve kaynak dosyalarını indirmek için tıklayınız.

Kenar boşluğu çökmesi nedir? Kenar boşluğu nasıl meydana gelir ve nasıl çözülür? Bu makalede bu sorulara cevap bulacağız.

Kenar boşluğu çökmesini W3C bitişik kenar boşluğu olarak tanımlar. İki veya daha fazla kutunun(sonraki bir nesne veya kutu olabilir)arasındaki boşluğun tek kenar boşluğu şeklinde görünmesidir.

Bu sorun aslında bir hata olarak kabul edilmemelidir Belkide CSS ile sayfa kodlarken karşılaştığımız ve farklı yöntemlerle çözdüğümüz bu soruna burada açıklık getirmeye çalışacağım.

Sorun tam olarak; iki veya daha fazla kutu arasında dikey kenar boşluğu(margin) değeri ataması yaptığımızda dikey kenar boşluklarının biri etki etmez biz sadece bir kenar boşluğunu görürüz. Buna kenar boşluğu çökmesi denir. Bu kenar boşluğu değerlerinden küçük olan çöker, büyük olanın değeri görünür. Kenar boşluğu çökmesi bir kaç farklı durumda meydana gelir. Bunları sırası ile inceleyelim.

1- İki Blok-level Element Arasında Meydana Gelen Çökme

Kenar boşluğu uygulanmış iki blok-level elementin dikey kenar boşluğunda bir çökme meydana gelir. Bir örnek yapalım.

Html kodu:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<p>
<p>Morbi eros lacus, volutpat at, interdum nec, dignissim at, turpis.</p>

CSS kodu:

p{
	margin:10px 0;
}

Örneği görmek için tıklayınız.

Bu kodu uyguladığımızda normalde aşağıdaki Resim-1′deki gibi bir görüntü elde etmemiz gerekirken, kodu çalıştırdığımızda Resim-2′deki görüntüyü alırız.

Resim -1 Olması gereken kenar boşluğu          

Resim – 2 Görünen kenar boşluğu görünümü         

Çözüm: Çözüm için bir kaç yöntem var ben burada bir tanesi örnek olarak vereceğim, ayrıca makalenin sonundaki çözümlerde göz atmanızda yarar var.

p{
	margin:10px 0;
    float:left;
    clear:both;
    width:100%
}

Bu kodlar sonrasında resim-1 deki görüntüyü alırız.

2- Kenar Boşluğu Uyulanmış İç içe Bulunan Elementler Arasında Meydana Gelen Çökme

Bir elemente ve içindeki elemente kenar boşluğu atadığımızda içte kalan elementin kenar boşlukları kaybolacaktır. Bir uygulama yapalım:

*{
    margin:0;
    padding:0;
}
div#kapsul{
    margin:10px;
    background-color:#0066CC;
}
p{
    margin:10px;
    background-color:#0CF;
}

Html kodu yazalım:

<div id="kapsul">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Örneği görmek için tıklayınız.

Örnekte gördüğümüz gibi paragrafın kenar boşluk değerleri görünmemektedir. Sadece dıştaki kapsul nesnesinin üst ve alt kenar boşlukları etki etmektedir.

Resim -1 Görünen kenar boşluğu        

Resim – 2 Olması gereken kenar boşluğu

Çözüm: Bu tip kenar boşluğu çökmelerinde 1px’lik bir padding eklersek ve paragrafın kenar boşluk değerini de 1px azaltırsak sorun çözülür. Kodu aşağıdaki gibi değiştirirsek sorunumuz hallolacaktır.

*{
    margin:0;
    padding:0;
}
div#kapsul{
    margin:10px;
    padding:1px;
    background-color:#0066CC;
}
p{
    margin:9px;
    background-color:#0CF;
}

3- Sadece İçteki Elemente Kenar Boşluğu Uyulanmış İç içe Bulunan Elementler Arasında Meydana Gelen Çökme

Diğer bir kenar boşluğu çökmesi görülen durumda yukarıdaki gibi içiçe durumda olan nesnelerden içteki paragrafta bir kenar boşluğu ataması varken(margin:10px) dıştaki kapsul nesnesinin kenar boşluğu değerinin sıfır olması durumunda meydana gelir. İçteki elementin dikey kenar boşlukları çökecektir.

*{
    margin:0;
    padding:0;
}
div#kapsul{
    margin:0;
    background-color:#0066CC;
}
p{
    margin:10px;
    background-color:#0CF;
}

Html kodu yazarsak:

<div id="kapsul">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Resim -1 Görünen kenar boşluğu        

Resim – 2 Olması gereken kenar boşluğu     

Örneği görmek için tıklayınız.

Çözüm: Bu durumda padding veya kenarlık(border) ataması yaparsak sorunumuz çözülecektir.

Sonuç ve Çözüm Önerileri

Yukarıda bazı çözüm önerileri sundak, ayrıca kenar boşluğu çökmesi hakkındaki aşağıdaki bilgilerde bize çözüm konusunda yardımcı olacaktır.

• Normal akışa sahip dokümanlardaki blok-level bir kutuda dikey kenar boşluğu çökmesi olur.
• Float uygulanmış nesnelerde çökme olmaz.
• Konumlandırma atamaları(position:absolute ve postion:relative) yapılmış nesnelerde çökme olmaz.
• overflow uygulanmış nesnelerde ve alt elementlerinde çökme olmaz.
• inline-block elementlerde çökme olmaz.
• html ve body elementlerine uygulanan kenar boşluğunda çökme olmaz.

Kaynaklar

• http://www.w3.org/TR/CSS21/box.html#collapsing-margins
• http://www.andybudd.com/archives/2003/11/no_margin_for_error/
• http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/
• http://www.ryznardesign.com/web_coding/tests/2004/preventing_margin_collapse.html
• http://maxdesign.com.au/presentation/workshop/slide46.htm
• http://reference.sitepoint.com/css/collapsingmargins
• http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin

margin-top

Yapısı : margin-top: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-top özelliği elementin üst kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

body {
	margin-top: 0
}

margin-right

Yapısı : margin-right: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-right özelliği elementin sağ kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

p.diger {
	margin-right: 50%
}

margin-bottom

Yapısı : margin-bottom: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-bottom özelliği elementin alt kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

p {
	margin-bottom: 10px
}

margin-left

Yapısı : margin-left: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-left özelliği elementin sol kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

p {
	margin-left: 10px
}

margin

Yapısı : margin: <deger>
Aldığı Değerler : [<percentage> | <length> |auto]{1,4}
Başlnagıç değeri: Tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin özelliği yukardaki özelliklerin tek bir özellikle uygulanması içinkullanılır.

h1 {
    margin: 0.25in;
    background-color:
    silver;
}
h1 {
	margin: 10px 20px 15px 5px;
}

yukarıda h1 için margin değerleri sıralaması şöyledir:

margin: üst sağ alt sol(saat yönünde)

ikili ve üçlü kullanımda mevcuttur

  h1 {margin: 0.25em 0 0.5em;} /* esittir '0.25em 0 0.5em 0' */
  h2 {margin: 0.15em 0.2em;}  /* esittir '0.15em 0.2em 0.15em 0.2em' */
  p {margin: 0.5em 10px;}    /* esittir '0.5em 10px 0.5em 10px' */
  p.close {margin: 0.1em;}  /* esittir '0.1em 0.1em 0.1em 0.1em' */

CSS tüm HTML elementlerini bir dikdörtgen kutu içine konmuş varsayarak ona göre pozisyonları ve boyutlarını konrol eder. Bu elementler her zaman bir padding, margin, border ve içerik alanını içerir. Aşağıdaki şekle bir bakınız:

Margin’ler her zaman transparandır. Border’lar üç şekilde( solid, dashed ve dotted) olabilir. Background sadece border içerisine uygulanabilir, yani padding ve içerik alanı kısmını içerir.

Bir elementin toplam genişliği; sol+sağ marginleri, sol+sağ padding’leri, sol+sağ border’ları ve elementin içeriğini kapsar. Margin’ler, padding’ler ve border’lar opsiyonel elementlerdir fakat başlangıçta bunların değerleri ’0′ olarak belirlenmiştir. Yükseklik içinde durum aynıdır. üst-alt margin değerleri, üst-alt padding değerleri, üst-alt border değerleri ve içerik alanı yükseliği toplamı yükseklik değerini oluşturur.

Box modeli iki elementi bulunur. Blok-level elementler ve inline-level elementler.

Blok-level elementler : Blok-level elementin görünüş formatı bir kutu gibidir. Blok-level elementler inline elementleri ve diğer blok-level elementleri içerebilir. Tipik özellikleri yeni bir satır başlangıcı yapmalarıdır. Örnek: h6, p, li vd.

Inline-level Elementler : Inline elementler bir içerik gibi görünür, diğer bir inline elelementi veye bir metni içere bilir. Genelde yeni satır veya boşluk oluşturmazlar. Örnek: a, strong, span vd.

Tüm kutu modelleri aşağıdaki bölümleri içerir:

İçerik Alanı: Elementin asıl içeriğini oluşturan kısmıdır. Metin ve nesneler içerir.

Padding : Elementin kenarındaki dolgu alanıdır.

Border : Elementin kenarlıklarıdır.

Margin: Elementin kenar boşluklarıdır.

Box Model Sorunu ve Çözümü

W3C’ye göre genişlik(ve yükseklik) değeri içerik alanı değeridir. padding ve border değerleri buna ek olarak toplam kutu genişliğine eklenir. Eğer toplam kutu değeri eklenecekse içerik alanı ve etrafındaki padding ve border değerleri toplamıdır.

Buraya kadar çok güzel ancak tüm web tarayıcıları bu durumu aynı şekilde yorumlamaz. IE’un IE6/strict’den önceki versiyonları yukarıda anlattığımız standart yorumun dışına çıkar, genişlik veya yükseklik değeri tüm kutu model element değerini ifade eder. Yani tüm padding ve border değerlerini içerir kalan kısmıda içerik alanı değeri olarak belirlenir.

#icerik{
    width:200px;
    padding:10px;
    border:5px solid #000;
}

Standart web tarayıcıları bu durumu şöyle yorumlayacaklardır.

200px + 10px sol kenar iç boşluğu + 5px sol kenar çizgisi + 10px sağ kenar iç boşluğu + 5px sağ kenar çizgisi = 230px toplam genişlik

kutu elemetinin genişliği 230px olacaktır.

Ancak IE‘un IE6/strict’den önceki versiyonlar için kutu elementinin genişlik değeri 200px’dir.

Margin(Kenar dış boşluğu) değeri width değerini direk etkilemese de dolaylı olarak etkiler. Kutular arasındaki genişliği hesaplarken margin değerlerinide dikkate almalıyız. CSS ile sayfa yapıların oluştururken kenar dış boğluklarını(margin) da dikkate elmalıyız.

Bu sorunun çözümü için üretilmiş bir çok yöntem vardır. Ancak bence en sağlamı tantek‘in ürettiği koddur ve burada bundan bahsedeceğim.

#icerik{
    width:230px;
    padding:10px;
    border:5px solid #000; /* Bundan sonraki kısmı ie5win sakla */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:200px;
}

Burdaki ilk genişilk değeri(2. satırdaki) IE’un IE6/strict’den önceki versiyonların yorumlayacağı genişlik değeri, ikinci genişlik değeri(7. satırdaki) ise standart yorumu destekleyen web tarayıcılarının kullanacağı değerdir.

Bu kodlamada son olarak Opera 5 için bir kod ekleyeceğiz.

#icerik{
    width:230px;
    padding:10px;
    border:5px solid #000; /* Bundan sonraki kısmı ie5win sakla */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:200px;
}
html>body #icerik {
	width:200px;
}

Not: Aynı şeyler yükseklik(height) içinde geçerlidir.

Kaynaklar

• http://tantek.com/CSS/Examples/boxmodelhack.html
• http://css-discuss.incutio.com/?page=BoxModelHack
• http://www.createwebmagic.com/css101/lesson2/?inc=part3
• CSS Hacks and Filters : Making Cascading Stylesheets Work

1. Font

Normalde bir font tanımlarken 4 adet CSS kodu kullanılır:

    font-weight: bold;
    font-family: verdana, sans-serif;
    font-size: 11px;
    line-height: 15px;

Kısaltma olarak kullanlan kod ise tek satır:

font: bold 11px/15px verdana, sans-serif;

2. Background

Background tanımlarken 5 adet atama yapmamız gerekirken kısaltma kullanarak tek tanıma indirebilriz.

    background-color: #000;
    background-image: url(ard.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50px 50px;

Kısaltırsak:

background: { #000 url(ard.jpg) no-repeat fixed 50px 50px; }

3. Renkler(Hex-decimal)

CSS stillerinde renkler genelde hex-decimal renk kodu ile tanımlanır örneğin color: #ff0000; kırmızı. Renkler 6 karakterle gösterilsede bir çok renk(web tabanlı) 3 karakterin tekrarlanması ile oluşturulur. Örneğin, kırmızı’nın hex-decimal kodunun kısaltırsak color: #f00;. Buradaki her karakter hex-decimal koddaki iki karaktere karşılık gelmektedir. Mesela, beyaz renk kullanacağınızda, color: white; veya color: #ffffff; kulanımı önermeyiz. Kısaltılmış olanı color: #fff; kullanmanız daha avantajlıdır.

4. Border

Kenarklık tanımlamalarında her özellik için bir tanımlama yapılır. örnek olarak bir elementin üst kenarına atama yapmak için:

	border-top-width: 2px;
    border-top-style: dashed;
    border-top-color: #f00;

Kısaltırsak:

	border-top: 2px dashed #f00;

Bu özellikleri tüm kenarlara uygulmak için:

	border: 2px dashed #f00;

5. Margin ve Padding’ler

Margin ve paddingler de normal tanımlama şöyledir:

    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 20px;
    margin-left: 15px;

kıslatılmış hali:

margin: 10px 5px 20px 15px;

Burada öznitelikler sağdan başlayarak saat yönünde devam eder. Aşağıda çeşitli kısaltma yöntemleri birlikte verilmiştir:

4 Değer: (margin: 20px 15px 10px 5px;) birinci – üst, ikinci – sağ, üçüncü – alt, dördüncü – sol.

3 Değer: (margin: 20px 15px 10px;) birinci – üst, ikinci – sol ve sağ, üçüncü – alt.

2 Değer: (margin: 20px 15px;) birinci – üst ve alt, ikinci – sol ve sağ.

1 Değer: (margin: 10px;) birinci – üst, sağ, alt ve sol

6. Listeler

Liste tanılmalrında da kısaltmalar mümkündür

ul {
    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.png);
}

Kısaltırsak;

ul li {
	list-style:square inside url(image.png);
}
/* burda özel bir durum vardır eğer resim yoksa yedek olarak square özelliği gösterilecektir.  */

7. Sıfır ’0′ ın Kısaltma olarak kullanılması

Kısaltmalarda son olarak ’0′ ın kullanımına değineceğiz. Normalde bir elemente değer ataması yapılırken değerin yanına birimi de yazılır(örn: 3px, 0.2em vd.), Ancak sıfır ’0′ için bu zorunlu değilidir.

padding:0;

Bu durumun bir istisnası mevcuttur oda yüzde değerlerinde atama yapılırken 0% olarak atama yapılmalıdır.

Kaynaklar

• http://www.w3schools.com/css/default.asp
• http://www.eyeofdesign.com
• http://www.spoono.com
• http://www.dustindiaz.com/css-shorthand/