+2 oy
4.4k Görünüm
Css kategorisinde (365 puan) tarafından
Bu css'te padding ve margin kullanımı nasıl yapılır? ikisi arasında fark tam olarak nedir? Anlayan?
Paylaş

1 cevap

+2 oy
(1.9k puan) tarafından
tarafından düzenlendi
 
En İyi Cevap

Merhabalar Css'te Margin Ve Padding Nesnelerin Belli Bir Konumdan Uzaklığını Belirtmek İçin Kullanılır.

İkisinin Farkları Ne Derseniz: 

Margin Dış, Padding İse İç Uzaklıktır. Şimdi Bunu Uygulamalı Olarak Resimde Anlattım, Hani Görünce Bir Şeyi Anlamak Çoğu İnsan İçin Daha Kolay Ve Akılda Kalıcıdır ;) 

 

Örnek 1 (Margin) :

Gördüğünüz Örnek'te 4 Kutu Var Bu Kutular Birer Obje Olarak Birbirlerine Kırmızı Oklarla Belirtilen Uzaklıktalar,

Burda Birbirlerine Olan Uzaklıkları İçin Margin Niteliği Kullanılmış...

image

Örnek 2 (Padding):

Birinci Kutucuk Bir Nesnedir Ve Bu Nesnenin Sınırları Çerçeveleri Oluyor. Bu Birinci Kutunun İçine Gelen Örnek Bir Yazının Kenar Sınırlardan Uzaklığı İse Padding Verilerek Yeşil Ok Miktarınca Uzaklaştırılmış. Yani Kutu 1 nesnesi içine ne gelirse gelsin (resim/yazı vs.) İç Uzaklık Belirtildiğinden Kutu 1 Çerçevesinden İçeride Uzakta Kalıcak..

 

Padding Margin Kod Yazımı

Margin ve Padding Kod Yapısı Aynıdır, Uzaklıklar Belirtilirken sadece bir yönü (örn sağ,sol) belirtebilirsiniz, böylelikle sadece belli bir yere mesafede uzak durur, yada yön belirtmeden girdiğiniz ilk değer otomatik tüm yönlere uygulanır:

Örnekler:

margin:5px; (Nesnenin Tüm Yönlerden Dış Uzaklıkları 5px Mesafededir)

padding:5px; (Nesnenin Tüm Yönlerden İç Uzaklıkları 5px Mesafededir)

 

Örnek Yönler:

margin-right:5px; (Nesnenin Sağ Dış Uzaklığı 5px Mesafededir)

padding-right:5px; (Nesnenin Sağ İç Uzaklığı 5px Mesafededir)

margin-top:5px; (Nesnenin Üst Dış Uzaklığı 5px Mesafededir)

margin-bottom:5px; (Nesnenin Alt Dış Uzaklığı 5px Mesafededir)

 

 

Not: W3 Uzman Platformu İçindeki Cevapların Bağlantılı Kaynakları Belirtilmeden Paylaşılması Yasaktır..

 

 

 

 

 

(365 puan) tarafından
Teşekkürler güzell açıklama olmus, bu marginde kullandıklarımızı paddingtede kullanabiliyormuyuz(top bottom vs)? gerçi ikisi aynı demişsiniz ama yine sorayım dedim :) içimde kalmasın
(1.9k puan) tarafından
Ne Demek :)  dediğim gibi aynılar, yani margin veya padding yazdıktan sonra ikisine de sonuna çizgi koyup devamında  "left" "right" "top" "bottom"  belirtebilirsiniz...
(365 puan) tarafından
En iyi cevap seçtim bu arada tekrardan teşekkürler..
(730 puan) tarafından
Anlamayanlar için güzsel açıklama olmuş..
(1.9k puan) tarafından
Teşekkürler Yorumunuz İçin :)
(164 puan) tarafından
Çok güzel açıklama olmuş. Eline sağlık.
(101 puan) tarafından
Evet güzel bir açıklama olmuş. Eline kalemine sağlık Code-Lord
Bu Hafta En Aktif Üyeler
    ...