marjin

Özet

 

Marjin CSS özelliği her dört kenarın kenar boşluğunu düzenler. Kısayol olarak diğer marjin özellikleri ile tek tek düzenlemenin önüne geçilir : margin-top, margin-right, margin-bottom ve margin-left.

Eksi değerlere müsade edilir.

Value not found in DB!

Sözdizimi

/* Her dört kenara uygulanır */
margin: 1em;

/* dikey | yatay */
margin: 5% auto;

/* üst | yatay | alt */
margin: 1em auto 2em; 

/* üst | sağ | alt | sol */
margin: 2px 1em 0 auto;

/* Genel değerler */
margin: inherit;
margin: initial;
margin: unset;

Değer Atamaları

Aşağıdaki gibi bir, iki, üç yada dörtlü değer atama:

<length>
Sabit değerleri ifade eder. Eksi değer alabilir. Örnek ölçü birimleri için bakınız <length> .
<percentage>
<percentage> içinde bulunduğu bloğun width özelliğine orantılıdır. Eksi değerlere müsade edilir.
auto
auto kullanıldığında değerleri otomatik atanır. Blok elementleri merkeze konumlandırmada kullanılır.
div { width:50%;  margin:0 auto; } div bloğunu yatay olarak merkeze konumlandırır.
  • Tek bir değer  tüm dört kenara uygulanır.
  • İki değerin ilki  üst ve alt kenara ikincisi sağ ve sol kenara uygulanır.
  • Üç  değerin ilki üst kenara ikincisi sağ ve sol kenara üçüncüsü alt kenara uygulanır.
  • Dört değer üst, sağ, alt ve sol kenarlara sırasıyla (saat yönünde) uygulanır.

Formel sözdizimi

Syntax not found in DB!

Örnekler

Basit bir örnek

HTML

<div class="ex1">
  margin:     auto;
  background: gold;
  width:      66%;
</div>
<div class="ex2">
  margin:     20px 0 0 -20px;
  background: gold;
  width:      66%;
</div>

CSS

.ex1 {
  margin: auto;
  background: gold;
  width: 66%;
}
.ex2 {
  margin: 20px 0px 0 -20px;
  background: gold;
  width: 66%;
}

başka bir örnek daha

margin: 5%;                /* tüm kenarlar 5% marjinli */

margin: 10px;              /* tüm kenarlar 10px marjinli */

margin: 1.6em 20px;        /* üst ve alt 1.6em, sağ ve sol 20px marjinli */

margin: 10px 3% 1em;       /* üst 10px, sağ ve sol 3%, alt 1em marjinli */

margin: 10px 3px 30px 5px; /* üst 10px, sağ 3px, alt 30px, sol 5px marjinli */

margin: 1em auto;          /* 1em marjin üst ve altta, çerçeve yatay olarak merkezde */

margin: auto;              /* çerçeve yatay olarak merkezde üst ve alt marjin 0 */

Yatay olarak merkeze konumlama margin: 0 auto;

Modern tarayıcılarda yatay merkez konumlandırma için display: flex; justify-content: center; kullanınız.

Bununla birlikte, eski tarayıcılarda IE8-9 gibi,  bu tanımlama kullanılamaz. Yatay merkez konumlama için elementi kapsayan elemente  margin: 0 auto; kullanınız.

Spesifikasyonlar

Specification Status Comment
CSS Basic Box Model
The definition of 'margin' in that specification.
Working Draft Belirgin değişiklik yok
CSS Transitions
The definition of 'margin' in that specification.
Working Draft "margin" transitions ta animasyon özellikiği kullanılabilir
CSS Level 2 (Revision 1)
The definition of 'margin' in that specification.
Recommendation Inline elementeki efekleri kaldırıldı
CSS Level 1
The definition of 'margin' in that specification.
Recommendation başlangic değeri atandı

Tarayıcı Uyumluluğu

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
auto value 1.0 ? 1.0 (1.7 or earlier) 6.0 (strict mode) 3.5 1.0 (85)
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 (Yes) 1.0 (1) 6.0 6.0 1.0

Ayrıca bakınız

Document Tags and Contributors

 Contributors to this page: asanhix
 Last updated by: asanhix,