CSS Margin Kullanımı

CSS Margin Özelliği

CSS margin özelliği elementin dışında boşluk oluşturmak için kullanılır.

margin özelliği ile HTML elementleri arasında boşluk oluşturabilirsiniz.

margin özelliği elementin border (kenar çizgisi) dışında boşluk oluşturur.

CSS ile margin üzerinde tam kontrol sağlarsınız. Dilerseniz tüm kenarların boşluğunu, dilerseniz tek bir kenarın boşluğunu ayarlayabilirsiniz.

Bu elementin margini 30px 

CSS Margin Kullanımı

CSS margin özelliği genelde margin:50px şeklinde kullanılır.  Bu şekilde kullanımda tüm 4 dış köşeden 50px boşluk bırakılır.

Dilerseniz köşelere ayrı ayrı boşluklar verebilirsiniz:

• margin-top üst boşluk
• margin-bottom alt boşluk
• margin-left sol boşluk
• margin-right sağ boşluk

div {
    margin-top: 50px;
    margin-bottom: 100px;
    margin-right: 200px;
    margin-left: 50px;
}

CSS Margin Kısa Yazım

Bir elementin 4 tarafının  marjin değerlerini tek bir satırda değiştirmek mümkündür.

Normalde elementin 4 tarafının marjin değerleri:

• margin-top üst marjin
• margin-bottom alt marjin
• margin-left sol marjin
• margin-right sağ marjin

şeklinde ayarlanır. Bunları tek satırda belirtmek mümkündür:margin:10px 30px 50px 40px

Bu şekilde kullanıldığında sırası ile üst, sol, alt ve sağ marjine tek satırda değer atanabilir.

p {
    margin: 100px 150px 100px 80px;
}

Margin Auto Değeri

Bir elementi yatayda ortalamak isterseniz margin özelliğine auto değerini vermelisiniz.

Bu özelliğin düzgün çalışması için elemente width ile genişlik vermelisiniz. Genişlik verdiğinizde element sağdan ve soldan eşit şekilde boşluk bırakılarak ortalanır.

p {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}