Css Margin ve Css Padding Kullanımı

Css margin ve padding değerleri boşluk vermeye yarar. Tüm web sitelerinde kesinlikle margin ve padding değerleri kullanılır. Eğer sizde bir webmaster iseniz kesinlikle margin ve padding’i bilmenizde fayda var. Kesinlikle zor değil tabi yapa yapa margin ve padding’in ne işe yaradığı daha da kavrayacaksınız.




Margin Ne İşe Yarar ?
Css’de margin özelliği nesnelerimize, yazılarımıza hemen hemen herşeye dıştan boşluk vermeye yarar. Margin, top (üst), right (sağ), bottom (alt) ve left (sol) özellikleriyle beraber kullanıldığı gibi auto olarakta kullanılabilinir. margin: auto; gibi..

Margin üstten başlar daha sonra saat yönünde ilerler. (Üst, Sağ, Alt ve Sol)

Kullanım Şekilleri Şöyledir;
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;

Üstteki Marginleri Tek Seferde Kısaca Şöyle de Yazabilirsiniz margin:5px 10px 15px 20px;

Veya tek seferde tüm kenarlardan aynı boşluğu verebilirsiniz.
Örneğin; margin: 5px; yaptınız, bunun karşılığı şudur; margin: 5px 5px 5px 5px;

Padding Ne İşe Yarar ?
Padding : Padding ise İcten Boşluk Vermeye (Bırakmaya) Yarar. Padding, top (üst), right (sağ), bottom (alt) ve left (sol) özellikleriyle beraber kullanılır.

Padding üstten başlar daha sonra saat yönünde ilerler. (Üst, Sağ, Alt ve Sol)

Kullanım Şekilleri Şöyledir;
padding-top:5px;
padding-right:10px;
padding-bottom:15px;
padding-left:20px;
Üstteki Paddingleri Tek Seferde Kısaca Şöyle de Yazabilirsiniz padding:5px 10px 15px 20px;

Veya tek seferde tüm kenarlardan aynı boşluğu verebilirsiniz.
Örneğin; padding: 5px; yaptınız, bunun karşılığı şudur; padding: 5px 5px 5px 5px;


5 yorum

  1. Kaan Yanıtla

    Merhaba,
    Ben CSS & HTML ile yoğun olarak karmaşık bir tasarım yapmayı planlıyorum. Fakat ben hep top ve left değerleri kullandım ve sadece benim çözünürlüğümde çalışan bilgisayarlar dışında, bozuk olarak göründüğünü öğrendim. Yani nesneler ve objeler sağa-sola-üste-aşağıya kaymış, kayık bir şekilde duruyor. Bunu marginler ile düzeltebileceğimi öğrendim yani top, left değerleri yerine, margin-top ve margin-left yazarsam tüm çözünürlüklere uyumlu olarak çalışır mı ?

    Teşekkür Ederim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.