Css Margin - Css Dersleri

[VexraDev]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

Css margin nedir ve nasıl kullanılır? css margin için top, right, bottom ve left nasıl kullanılır?

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.

** 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;
}

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;
}

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;
}