Merhaba arkadaşlar bu yazımda sizlere genellikle yeni yeni CSS öğreneneler arasında anlaşılması zor olan bir konu olan Padding ve Margin arasında ki farklardan bahsedeceğim.

Bu yazımda bu konuyu daha detaylı anlamanız için 3 başlık adı altında inceleyeceğim.

  • Padding Nedir ?
  • Margin Nedir ?
  • Padding ve Margin Arasındaki Fark Nedir ?

Padding Nedir ?

Padding Nedir ?

Padding, border’ın içindeki elementlere boşluk vermeyi amaçlar. Padding özelliğine tam olarak erişebilmek için şu özellikler vardır. Bu özellikler

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Bu özelliklerin hepsinde belirli durumlar her zaman geçerlidir bu durumlar

  • uzunluğunu px, pt, cm vb. gibi özellikler ile belirlenebilir
  • % işareti ile elementin genişliğine göre bir değer verebilirsiniz.
  • Bir elemente verilen özellik o elementin bütün alt elementleri içinde geçerlidir.

Margin Nedir ?

Margin ise bir elementin border alanının dışından boşluk bırakmasını sağlar. Margin özelliklerini tam kontrollü kullanabilmek için şu 4 özelliği kullanabiliriz.

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Bu özellikler belirli benzerlikleri vardır bunlar

  • auto, web tarayıcısının yaptığı hesaplama ile uzunluğu belirlenir.
  • uzunluk değerleri px, pt, cm vb. uzunluk birimleri ile belirtilebilinir.
  • % işareti elementin genişliğine göre bir değer alır.
  • Bir elemente verilen özellik o elementin tüm alt elementlerine de uygulanır.

Padding ve Margin Arasındaki Fark


Padding ve Margin Arasındaki Farklar
Padding ve Margin Arasındaki Farklar

Padding ile margin arasında ki en iyi farkı aslında bu fotoğraf anlatıyor ama hine de daha iyi anlatabilmek için sizlere şöyle açıklayabilirim.

Padding ile bir elementin içinde ki içeriğe boşluk verdirirken. Margin ise direkt olarak elemente dış kısımlarından boşluk vermesini sağlar.

Bu yazımın da sonuna gelmişken sizlere Padding ve Margin’in neler olduğunu ve Padding ve Margin arasındaki farkı anlatmış oldum.