CSS Kutu Modeli – Margin Özellikleri

Margin özelliği elementin etrafındaki boşluk olarak tanımlanır. Negatifdeğer alabilir. Tek tek özellikler(margin-top,margin-left vd.) atanabildiğigibi tek bir özellikle(margin) de tanımlama yapılabilir. Margin özelliklerinianlamak için lütfen Box modellerine bir göz atın.

Kutu Modeli

margin-top
margin-right
margin-bottom
margin-left
margin

margin-top

Yapısı : margin-top: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-top özelliği elementin üst kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

body {
	margin-top: 0
}

Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

margin-right

Yapısı : margin-right: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-right özelliği elementin sağ kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

p.diger {
	margin-right: 50%
}

Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

margin-bottom

Yapısı : margin-bottom: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-bottom özelliği elementin alt kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

p {
	margin-bottom: 10px
}

Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

margin-left

Yapısı : margin-left: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-left özelliği elementin sol kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

p {
	margin-left: 10px
}

Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

margin

Yapısı : margin: <deger>
Aldığı Değerler : [<percentage> | <length> |auto]{1,4}
Başlnagıç değeri: Tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin özelliği yukardaki özelliklerin tek bir özellikle uygulanması içinkullanılır.

h1 {
    margin: 0.25in;
    background-color:
    silver;
}
h1 {
	margin: 10px 20px 15px 5px;
}

yukarıda h1 için margin değerleri sıralaması şöyledir:

margin: üst sağ alt sol(saat yönünde)

ikili ve üçlü kullanımda mevcuttur

  h1 {margin: 0.25em 0 0.5em;} /* esittir '0.25em 0 0.5em 0' */
  h2 {margin: 0.15em 0.2em;}  /* esittir '0.15em 0.2em 0.15em 0.2em' */
  p {margin: 0.5em 10px;}    /* esittir '0.5em 10px 0.5em 10px' */
  p.close {margin: 0.1em;}  /* esittir '0.1em 0.1em 0.1em 0.1em' */

Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

32 Yorum (Yorum Ekle)

Son_Silahsor diyor ki:

Ağustos 29, 2009, 14:49

Merhaba, konuyla alakası yok; ama merak ediyorum. Bazı yerlerde bu yorum fotmunu görüyorum. Acaba bu yorum formunun WordPress'in olağan yorum formundan farkı nedir.

Cevapla

fatihhayri diyor ki:

Ağustos 31, 2009, 08:51

Yorum alanından bahsediyorsanız wordpress in bir eklentisi. intensedebate adlı bir eklenti yorum kısmını daha anlaşılır ve kullanılabilir yapıyor.

Cevapla

Erdinç Çelik diyor ki:

Ağustos 21, 2009, 08:46

ben margin-bottom özelligini kullandıgım zaman int explorerde oluyor ama diğer tarayıcılarda olmuyorr bu sorunu nasıl çözerim.

Cevapla

fatihhayri diyor ki:

Ağustos 21, 2009, 11:49

olması lazım. Örneği görebilirmiyiz

Cevapla

beceriksiz diyor ki:

Mart 26, 2009, 09:39

Merhaba Fatih Bey. Bi konuda kafam karıştı, yardımcı olur musunuz?
Margin veya padding konusunda right ile birlikte left, top ile birlikte bottom kullanmak mantıksız olmuyor mu? çünkü top verdiğimizde bottom otomatik olarak top özelliğine verdiğimiz değerden kalan bölüm oluyor, bottom da verdiğimizde top değişmeli yani aklım karıştı biraz :) anlatabilmişimdir inşallah…

Cevapla

fatih.hayrioglu diyor ki:

Mart 26, 2009, 10:48

bu o an kodlamada kullanacağınız durum ile ilgilidir. Eğer her tarafa farklı değerler atayacaksanız margin: 1px 2px 5px 7px; gibi 4 lü tanım yapabilrisiniz. ama sağ-sol ve üst-alt aynı değerler aldığında margin:5px 0; kullanımı daha avantajlı.

Cevapla

CSS Kutu Modeli - Padding Özellikleri / Fatih Hayrioğlu’nun not defteri diyor ki:

Şubat 10, 2009, 16:52

[...] margin‘deki gibi farklı kullanım şekilleri mevcuttur. Browser Uyumu: Internet Explorer 4+ Netscape 4+ Opera 3.6+ W3C’s CSS Level 1+ CSS Profile 1.0 [...]

Cevapla

sem er diyor ki:

Şubat 28, 2008, 15:32

merhaba;
öncelikle size çok teşekkür ediyorum. emeğinize ve elinize sağlık.

benim bi sorum olacaktı css kutu özelliklerini tanımlayarak bi sayfa oluşturdum. bu sayfayı firefoxta ortalayamıyorum. IE de bi sıkıntı yok yardımcı olursanız çok sevinirim şimdiden teşekkürler

Cevapla

fatih.hayrioglu diyor ki:

Şubat 14, 2008, 21:59

javascript ile bir çözüm yolu vardı. Ama bence değmez.

Cevapla