CSS ile Padding ve Margin Kullanımı (Boşluklar)

Mayıs 2019
YouTube'ta Takip Et:

CSS’te sayfa tasarlarken kullanılan boşluklar padding ve margin özellikleri ile verilir. Padding ve margin kullanılmazsa sayfa içindeki nesneler birbirine çok bitişik olur ve sıkışık, ferahlıktan uzak bir algı oluşturur.

Padding ve margin ile bir nesnenin üstünden, altından, sağından ve solundan boşluk bırakmamız mümkün olabiliyor. Örnek bir şablon oluşturarak padding ve margin değerlerinin ne anlama geldiğini öğrenelim.

Gördüğünüz gibi varsayılan olarak mavi alan içindeki metnin kenarlarında bir boşluk yok, mavi alanın dışında da boşluk yok. Aşağıdaki özellikleri yukarıdaki şablona ekleyerek sonuç alabilirsiniz.

CSS’te Padding Kullanımı

CSS’te padding özelliği padding değeri verilen nesnenin çevresine boşluk bırakmak için kullanılıyor. Padding kullanımının nasıl olduğunu açıklamalarıyla aşama aşama anlatmaya çalışacağım.

Padding değerleri yüzde şeklinde de olabilir, piksel şeklinde de. Biz şimdi piksel değeri üzerinden ilerleyeceğiz. 20px değerindeki bir padding, nesnenin üstünden, altından, sağından ve solundan 20px içeride görüneceği anlamına geliyor.

Yukarıdan, aşağıdan, soldan ve sağdan bırakılacak boşlukları ayrı ayrı da belirtebiliyoruz. Aşağıdaki örnek sırasıyla yukarıdan, sağdan, aşağıdan ve soldan bırakılacak boşluk anlamına geliyor.

Tüm bu değerleri ayrı ayrı da kullanabiliyorsunuz. Sadece soldan boşluk vermek istiyorsanız ve diğerleri önemli değilse padding-left özelliği ile bunu çözebiliyoruz. Aşağıdaki örnek soldan 20 piksellik bir boşluk bırakır. padding-right, padding-top ve padding-bottom özelliklerini de aynı şekilde kullanabiliyoruz.

CSS’te padding özelliğini link verdiğiniz butonlarda ya da navigasyon menülerinde, arama kutusu ya da iletişim formu gibi textbox özelliklerinde sıklıkla kullanıyoruz.

Padding’i kullanım yöntemlerinden biri de bu şekilde. İlk değer yukarıdan ve aşağıdan verilecen boşluk değerini, ikinci değer de soldan ve sağdan verilen boşluk değerini ifade ediyor. Yani bunu padding: 10px 40px 10px 40px şeklinde de yazabiliriz. Ama ne kadar kısa olursa o kadar az yer kaplar.

Bu yazım şeklinin de anlamı şu. İlk değer yine yukarıdan bırakılacak boşluk değeri. İkinci değer sağdan ve soldan bırakılacak boşluk değeri. Son değer ise aşağıdaki boşluk değeri.

CSS’te Margin Kullanımı

Margin özelliği de boşluklarla ilgili. Ama padding gibi nesnenin içine değil dışına doğru bir yaklaşımı var. Kullanımı ise tamamen padding ile aynı. Bir nesneye soldan margin vermek isterseniz padding-left özelliğinde gördüğümüz gibi bir yapıyı kullanıyor ve margin-left veriyoruz.

CSS'te Padding ve Margin Arasındaki Fark

Margin ve padding arasındaki fark nedir?

Farkı anlayabilmek için en iyisi bir örnek yapalım. Bir menü hazırlayalım ve menüdeki nesnelere padding ve margin değeri uygulayarak öğrendiğimizi pekiştirelim.

Şimdi bu kodlardaki li etiketlerine padding ve margin değerleri vererek aradaki farkı bulmaya çalışın. Padding verdiğinizde linklerin her biri kendi içinde boşluklara sahip olacaktır. Margin değeri verirseniz İki li arasında boşluk vermiş olacaksınız, birbirlerinden ayrılacaklar.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.