CSS (DIŞ BOŞLUK)MARGİN NEDİR, KULLANIMI NASILDIR?

Margin özelliği, elementin dört kenarına dıştan boşluk vermeye yarar. Negatif değer alabilir. Ayrıca kenar payları her kenar için ayrı ayrı margin-bottom, margin-top, margin-left ve margin-right özellikleri belirtildiği gibi tek bir özellikle(margin) de tanımlama yapılabilir. Margin özelliklerini anlamak için lütfen Box(kutu) modellerine bir göz atın.


css margin

Margin üstten başlar daha sonra saat yönünde ilerler. (Üst, Sağ, Alt ve Sol)

Alabileceği değerler:

CSS Çoklu Dış Kenar Boşluğu Kullanımı(Margin Individual Sides)


CSS, bir elementin farklı tarafları için farklı kenar boşlukları belirtmek mümkündür.

Örnek:

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 75px;
    margin-left: 50px;
  }

CSS Dış Kenar Boşluğu Kısa Yazım - Margin Shorthand Property


Sadece margin kullanarak hepsi için geçerli tek bir tane değer yazabildiğimiz gibi (üstten başlayarak saat yönünde) sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki dört kodun tamamını tek kodda yazabiliriz:

Örnek:

p {
    margin: 100px 50px;
  }

Örnek: Parağraflarımıza dış boşluk verelim.

p {
    background-color: yellow;
}

p.ek {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 100px;
    margin-left: 50px;
}

HTML:

Hiç margin özelliği verilmemiş parağraf

margin belirtilmiş parağraf

ÇIKTI:

css margin

Örnek: İki kutu oluşturalım üsteki kutuya göre boşluk verelim

CSS:


.kutu{width:100px;
     height:100px;
	 background-color:blue;
	 }
	 
.kutu1{width:100px;
      height:100px;
	  background-color:blue;
	  margin-left:80px;
	  margin-top:50px;
	  }

HTML:

	

ÇIKTI:

css margin

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

9838

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.