Css Margin

Css Margin, html nesnelerinin birbiri ile olan mesafelerini belirtir.

<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>

.box{
  height:50px;  
  width:250px;
  margin:10px;
}
.red{
  background-color:red;
  margin-left:50px;
}
.blue{
  background-color:blue;
  margin-bottom:10px;
}
.green{
  background-color:green;
  margin-top:20px;
}

Örneğimizde kutular için farklı margin özellikleri kullanılmıştır. Margin değerlerini farklı yöntemlerle belirtebiliriz.

Örnek 1 için için tıklayınız.

** margin : top right bottom left; =>  şeklinde 4 köşeden margin değerlerini tek tek belirleyebiliriz.

** margin : top-bottom right-left; =>  iki değer şeklinde bir kullanım yapabiliriz.

Örneğin; margin:10px 20px; demekle üst-alt için 10px ve sağ-sol için ise 20px' lik bir boşluk bırakımış oluruz.

** margin : top-right-bottom-left; => şeklinde 4 köşe için tek bir değer kullanımıda yapabiliriz.

Örneğin; margin: 10px; dediğimizde 4 köşe için 10px margin değeri vermiş oluruz.

Margin ile sayfadaki nesneleri nasıl ortalarız ?

Margin nesneleri ortalamak için auto özelliği kullanılır.

Ortalanacak nesnelerin satır içinde bir genişliğe sahip olması gerekir. Bu kullanım genelde sayfa tasarımlarında sitenin genelini tarayıcının tam ortasına getirmek için kullanılır. Yani 1920px' lik bir genişliğe sahip olan bir ekranda sitemizin genişliği 1000px ise bu durumda site içeriğini ekranın tam ortasına alıp (auto) sağ ve soldan eşit boşluklar bırakmak güzel bir görüntü sağlayacaktır.

<div id="header" class="box">
  Header
</div>
<div id="content" class="box">
  Content
</div>
<div id="footer" class="box">
  Footer
</div>

.box{
  height:60px;  
  width:600px;
  margin:10px auto;
}
#header{
  background-color:red;
}
#content{
  background-color:blue;
}
#footer{
  background-color:green;
}

Örnek 2 için için tıklayınız.

Burada tüm <div> etiketlerine sabit genişlik verip hepsini ortalamak yerine en dışta bir container oluşturup bu işlemi çok daha kolay bir şekilde yapabiliriz.

<div class="container">
  <div id="header" class="box">
     Header
  </div>

  <div id="content" class="box">
     Content
  </div>

  <div id="footer" class="box">
    Footer
  </div>
</div>

.container{
  margin:10px auto;
  width:600px;  
}
.box{
  height:60px;    
}
#header{
  background-color:red;
}
#content{
  background-color:blue;
}
#footer{
  background-color:green;
}

Örnek 3 için için tıklayınız.

Inline Etiketlerde Css Margin Kullanımı Nasıldır ?

Inline etiketler için margin-top ve margin-bottom özelliği işlevsel değildir. Inline etiketler için sadece margin-left ve margin-right özelliklerini kullanabiliriz.

<a href="#"> link 1 </a>
<a href="#"> link 2 </a>
<a href="#"> link 3 </a>

a {
  text-decoration:none;
  margin-left:10px;
  margin-right:20px;
  background-color:red;
  color:white;
}

Örnek 4 için için tıklayınız.