Css Margin Özellikleri

CSS Margin özelliği
Margin kelimesinin Türkçe karşılığı pay,mesafe anlamları taşımaktadır. Css kutu özellikleri dersinde bahsettiğimiz margin değerleri hakkında kısa bilgiler vereceğiz bu dersimizde.

Margin değerlerine bir örnek vermek için bir tabloyu baz alalım, tablonun bulunduğu katman içerisinde kenarlara olan uzaklığıdır.

Aşağıda bulunan kırmızı border'a sahip tablo örneğini inceleyelim,

Kırmızı kenarlıklara sahip tablomuz gri kenarlıklara sahip tablo içerisinde margin değerleriyle belirli bir konum almıştır.

Margin-top ve margin-left değerlerini 20px olarak tanımladık.

Yukarıdaki örnekte verdiğimiz margin değerlerini daha detaylı inceleyecek olursak;

#marginbox{ width: 575px; height: 250px; border: 2px solid #ccc; } .marginin{ width: 400px; height: 200px; border: 2px solid red; margin-top: 20px;  /* Kırmızı kenarlıklı kutunun gri kenarlıklı kutuya yukarıdan uzaklığı */ margin-left: 20px;  /* Kırmızı kenarlıklı kutunun gri kenarlıklı kutuya soldan uzaklığı */ }

Kodda verilen özellikler margin özelliğinin kullanımını kısaca özetlemiştir bize.
Css kodu yazarken ne kadar kısa kod yazarsak o kadar iyidir, bu yüzden margin değerlerini şu şekilde yazabiliriz;
Örnek:

.marginin{ width: 400px; height: 200px; border: 2px solid red; margin: 20 0 0 20; /* Buradaki değerlerin sıralaması üst | sağ | alt | sol şeklindedir.*/ }

Kodda bulunan değerleri yapılan tasarımlarda daha iyi bir şekilde ayarlama olanağına sahibiz.
Margin hakkında şimdilik bu kadar bilgi vermemiz yeterli.Kolay gelsin.