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ı)

Likid Sayfalar yüksek çözünürlüğe sahip geniş ekranlarda satır yüksekliklerinden dolayı pek hoş görünmeyebilir. Bunun aksine, daraltılmış pencerelerde çok kısa ve parçalanmış görüneceklerdir ve metin boyutu arttırıldığında üst üste binmiş satırlarda görüneceklerdir. Bununla ilgili olarak elastik sayfa oluşturma metodu bize yardım edecektir.

Elastik Sayfalar web tarayıcılarına göre font boyutunun ve elementlerin genişliğinin göreceli olarak ayarlandığı sayfalardır. Genişlikleri em, yüzde(%) ve ex gibi göreceli birimler kullanarak tanımladığımızda font boyutu sayfa genişliğine göre değişecektir. Aynı şekilde satır yüksekliği(line-height) değerinde de göreceli birimler kullanarak daha okunaklı sayfalar elde edebilriz.

Elastik sayfa planlama metodununda bazı problemleri vardır, örneğin sabit genişlikteki sayflardaki gibi elastik metodda da boş alanlar yeterince kullanılamaz. Çünkü font boyutu arttırılırsa sayfa genişliği tarayıcının genişliğini geçecektir ve yatay kaydırma çubuğu çıkacaktır. Bu durumdan kurtulmak için body elementine max-width 100% ataması yapabilriz. Ancak bu özelliği IE6 desteklememektedir.

Elastik web sayfası tasarlamak çok kolaydır. Sabit Genişlikte sayfa tasarımı yapılan bir sayfanın birimleri piksel yerine em olarak değiştirilirse sayfa elastik yapıya kavuşacaktır. 1em yaklaşık olarak 10piksele denk gelir.

Çoğu web tarayıcısınnda normal font boyutu 16px’dir. 10 pikselin yüzdesel değeri yaklaşık olarak 62.5% civarındadır. Bu belirtilen değerlere göre kodumuzu yazarsak:

body{
    text-align:center;
    font-size:62.5%;
    font-family:Arial, Helvetica, sans-serif;
}
#sayfa{
    width:72em;
    margin:0 auto;
    text-align:left;
}

#ustAlan
{
	width:72em;
} 

#anaMenu
{
    float: left;
    width: 18em;
}

#KapsayiciAlan
{
    float: right;
    width: 52em;
} 

#icerik
{
    float: left;
    width: 32em;
}

#BannerAlani{
    float: right;
    width: 20em;
} 

#altAlan
{
    width:72em;
    clear: both;
}

Burada body elementi font boyutunu 1em eşit olan font-size:62.5%; atamasını yaptık. Daha sonra sayfadaki birimleri bu değeri baz alarak hesapladık ve em birimi vererek sayfamızı elastik bir hala getirdik.

Sayfamızın Sabit Genişlikteki sayfalardan farkını anlamak için web tarayıcısının font boyutu değerlerini veya yakınlaştırma(zoom) aracını (Opera, FF-eklentisi var ve IE 7 de var)kullanarak görebilriz. IE ve FF için Görünüm(View) – Metin Boyutu(Text Size) Opera için View – Zoom seçeneklerini kullanarak farkı görebilriz.