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ı marginBottom, marginTop, marginLeft ve marginRight ö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)

  • margin - Hızlı kullanım
  • margin-top - Üstten boşluk
  • margin-right - Sağdan boşluk
  • margin-bottom - Alttan boşluk
  • margin-left - Soldan boşluk

Alabileceği değerler:

  • auto - Kenarlıklar tarayıcı tarafından otomatik ayarlanır
  • uzunluk - piksel, punto,santimetre olarak boşluk belirtme
  • % - İçerik genişliğine göre yüzdeli olara boşluk belitme
  • inherit - Ana elemandan özelliği miras alarak belirtme

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;
  }
  • margin: 25px 50px 75px 100px; (üst 25 piksel, sağ 50 piksel, alt 75 piksel, sol 100 piksel olur.)
  • margin: 25px 50px 75px; (üst 25 piksel, sağ ve sol 50 piksel, alt 75 piksel olur.)
  • margin: 25px 50px; (üst ve alt 25 piksel, sağ ve sol 50 piksel olur.)
  • margin: 25px; (Tüm dış kenar boşlukları 25 piksel olur.)

Ö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

furkan Diyor ki 20/04/2017

çok iyi anlatım hocam teşekkürler

Adınız

Eposta

Mesaj

557

Güvenlik No

REKLAM
KATEGORİ
POPÜLER MAKALE