Bu yazımda Css’te margin özelliğini öğreneceğiz. Margin özelliği ile Html etiketlerine dış boşluklar verebiliriz. Margin değeri verirken bunu 4 farklı yol ile yapabiliriz. Bunlar:
1 – auto ( margin:auto; ) : auto değeri verirsek, etiketin kenar boşluklarını tarayıcı otomatik olarak belirler.(Bu özelliğin düzgün çalışması için etiketin width özelliğine bir genişlik değeri vermelisiniz.)
2 – length ( margin:10px; ) : px, pt, cm vb.. bir değer verebiliriz.
3 – % ( margin:20%; ) : İçerisinde bulunduğu etiketin genişliğinin yüzdesi olarak değer verebiliriz.
4 – inherit ( margin:inherit; ) : inherit değeri verirsek, ebeveyn etiketinin margin değeri ne ise onu miras alır ve aynı değer uygulanır.
Dikkat : Margin değeri, negatif ( – ) değer de alabilir.
Bu değerleri margin özelliğine verirsek, etiketin 4 tarafınada (yukarı, sağ, aşağı, sol ) dış boşluk vermiş oluruz.Eğer sadece bir tarafına vermek istersek şu özellikleride kullanabiliriz :
► margin-top
► margin-right
► margin-bottom
► margin-left
Margin özelliği 1, 2, 3 veya 4 değer alabilir.Şimdi bir <div> etiketi tanımlayalım ve margin değerleri vererek sonuçlarını inceleyelim.
1 – margin: 80px; => Bu şekilde tek değer verilirse etiketin her yanına (yukarı, sağ, aşağı, sol ) 80px dış boşluk değeri uygulanır.
2 – margin: 60px 80px; => Bu şekilde 2 değer verilirse etiketin,
yukarı ve aşağı dış boşluk değeri = 60px
sağ ve sol dış boşluk değeri = 80px olarak uygulanır.
3 – margin: 60px 70px 80px; => Bu şekilde 3 değer verilirse etiketin,
yukarı dış boşluk değeri = 60px
sağ ve sol dış boşluk değeri = 70px
aşağı dış boşluk değeri = 80px olarak uygulanır.
4 – margin: 60px 70px 80px 90px; => Bu şekilde 4 değer verilirse etiketin,
yukarı dış boşluk değeri = 60px
sağ dış boşluk değeri = 70px
aşağı dış boşluk değeri = 80px
sol dış boşluk değeri = 90px olarak uygulanır.
Dikkat : Inline etiketlerde margin-top ve margin-bottom özellikleri işlevsel değildir.Ama margin-left ve margin-right özelliklerini kullanabiliyoruz.
Yeni bir makalede görüşmek üzere.
Önceki : Css Dersleri 5 – Border Kullanımı
Sonraki : Css Dersleri 7 – Padding Kullanımı
