Css Dersleri 6 – Margin Kullanımı

Merhaba Arkadaşlar,
Bu makalede 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.

css-dersleri-margin-kullanimi-1

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.

css-dersleri-margin-kullanimi-2

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.

css-dersleri-margin-kullanimi-3

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.

css-dersleri-margin-kullanimi-4

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ı

Leave a Reply

WEB TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +