CSS ile çalışırken muhtemelen en çok karşınıza gelecek terimlerden ikisi muhtemelen padding (içten boşluk) ve margin (dıştan boşluk) olacaktır. Bu yazımızda CSS padding ve margin kullanımı gibi konuları işleyeceğiz. Dilerseniz sırayla bu terimleri işlemeye başlayalım.

CSS Padding (İçten Boşluk)

Padding Nedir ?

Padding, bir HTML elementinin kenarlarının içerisinde olan elemanlara olan uzaklığını belirleyebildiğimiz komuttur. Örneğin bir div içerisindeki yazı ile, div’in kenarlıkları arasında kalan boşluğu padding ile belirleyebiliriz. Daha iyi anlaşılması için hemen bir resim ile padding mantığını görelim.

CSS'te Padding Mantığı
CSS’te Padding Mantığı

Padding Komutları ve Alabileceği Değerler

Padding ile iç boşlukları verirken, 4 ayrı köşeye aynı genişlikte boşluk verebileceğiniz gibi, tümüne ayrı ayrı değerlerde verebilirsiniz. Şimdi bunları yapabileceğinizi komutları görelim.

  • padding – Tüm köşeler için
  • padding-top – Üstten boşluk
  • padding-right – Sağdan boşluk
  • padding-bottom – Alttan boşluk
  • padding-left – Soldan boşluk

Bu komutların alabileceği değerler:

  • genişlik : px, em, pt gibi ölçülerle genişliği belirtme
  • yüzde kullanma (%) – İçerik genişliğine göre oranlar

Padding Kullanımı

Artık padding komutlarını nasıl kullanabileceğimizi görebiliriz.

Öncelikle tüm köşelere basit bir şekilde nasıl eşit boşluk bırakacağımızı görelim.

.kutu{
  padding : 10px; <!-- Tüm köşeler ile araya 10 piksel boşluk bırakacaktır. -->
}

Şimdi de tüm köşeler ile nasıl farklı boyutta boşluklar verebileceğimizi görelim.

.kutu{
  padding-top: 5px; <!-- Üst ile 5 piksel boşluk bırakır -->
  padding-right: 10px; <!-- Sağ ile 10 piksel boşluk bırakır -->
  padding-bottom: 15px; <!-- Alt ile 15 piksel boşluk bırakır -->
  padding-left: 20px; <!-- Sol ile 20 piksel boşluk bırakır -->
}

Tüm köşelere farklı boşluklar vermenin kısa yolları da vardır. Şu şekilde yapabiliriz : 

.kutu{
  padding : 5px 10px 15px 20px; <!-- Sırasıyla üst(5px), sağ(10px), alt(15px) ve sol(20px) köşeler -->
}

.kutu2{
  padding : 5ğx 15px; <!-- Sırasıyla üst-alt(5px) ve sağ-sol(15px) köşeler -->
}

CSS Margin (Dıştan Boşluk)

Margin Nedir ?

Margin, bir HTML elementinin çevresindeki bulunan elementlere olan uzaklığını belirleyebildiğimiz komuttur. Örneğin bir div’in çevresindeki elemanlara olan uzaklığını margin ile belirleyebiliriz. Daha iyi anlaşılması için hemen bir resim ile görelim.

Bu yazı dikkatini çekebilir.   CSS Kenarlıklar (Borders)
CSS'te Margin Mantığı
CSS’te Margin Mantığı

Margin Komutları ve Alabileceği Değerler

Padding’de olduğu gibi, margin’de de 4 ayrı köşeden aynı genişlikte boşluk verebilir, ayrıca tüm köşelerden de ayrı ayrı değerler verebilirsiniz. Şimdi bunları yapabileceğinizi komutları görelim.

  • margin – Tüm köşeler için
  • margin-top – Üstten boşluk
  • margin-right – Sağdan boşluk
  • margin-bottom – Alttan boşluk
  • margin-left – Soldan boşluk

Bu komutların alabileceği değerler:

  • auto – Tarayıcı tarafından otomatik ayarlanır
  • px – Piksel olarak boşluk belirtme
  • % – İçerik genişliğine göre oranlar

Margin Kullanımı

Artık margin komutlarını nasıl kullanabileceğimizi görebiliriz.

Öncelikle tüm köşelerden basit bir şekilde nasıl eşit boşluk bırakacağımızı görelim.

.kutu{
  margin : 10px; <!-- Tüm köşelerden dış elementler ile araya 10 piksel boşluk bırakacaktır. -->
}

Şimdide tüm köşelerden dış elementlere nasıl farklı boyutta boşluklar verebileceğimizi görelim.

.kutu{
  margin-top: 5px; <!-- Üst elementler ile 5 piksel boşluk bırakır -->
  margin-right: 10px; <!-- Sağda kalan elementler ile 10 piksel boşluk bırakır -->
  margin-bottom: 15px; <!-- Altta kalan elementler ile 15 piksel boşluk bırakır -->
  margin-left: 20px; <!-- Solda kalan elementler ile 20 piksel boşluk bırakır -->
}

Tüm köşelerden farklı boşluklar vermenin kısa yolları da vardır. Şu şekilde yapabiliriz : 

.kutu{
  margin: 5px 10px 15px 20px; <!-- Sırasıyla üst(5px), sağ(10px), alt(15px) ve sol(20px) köşeler -->
}

.kutu2{
  margin : 5px 15px; <!-- Sırasıyla üst-alt(5px) ve sağ-sol(15px) köşeler -->
}

Bu yazımızda CSS padding ve margin kullanımı konusunu işledik. Ayrıca padding nedir, margin nedir gibi soruları yanıtladık. Umarım faydalı olmuştur. Diğer CSS derslerimize ulaşmak için buraya tıklayabilirsiniz.