İnsanların en hayırlısı, insanlara faydalı olanıdır. (hadis-i şerif)

Kerem’in Kişisel Blogu
≡ Menu

Css dış ve iç boşluklar belirlemek

Daha anlaşılır olması için sadece margin komutu ile “dış boşluk” belirlemeyi örneklerle özet olarak anlatacağım. Dış boşluk örneklerinde ufak bir değişiklik yaparak iç boşluk oranları belirleyebiliriz.

Sağ, sol, üst ve alt kısımlarına aynı oranda dış mesafe belirlemek için margin komutuna tek değer veriyoruz.

.ornek { margin: 5px; }

Sağ, sol dış mesafe oranları 10px, üst ve alt dış mesafe oranlarınını 15px olarak belirlemek için margin komutuna iki ayrı değer veriyoruz.

.ornek { margin: 10px 15px; }

Dört ayrı noktaya ayrı dış mesafe değerleri vermek istersek aynı şekilde margin komutuna dört farklı değer tanıtıyoruz.

.ornek { margin: 10px 15px 5px 20px; }

Bu uygulamayı margin-top:, margin-left gibi komutlarlada uygulayabiliriz fakat örneklerdeki gibi uygulamanızı tavsiye ederim. Bütün tarayıcılara uyumludur.

Not: Margin komutu div’e “dış” boşluk değerleri tanımlar.

Bazı durumlarda iç boşluk tanımlamanız gerekebilir. İç boşluk için “padding” komutunu kullanıyoruz.

.ornek { padding: 10px 15px 5px 20px; }

Verdiğim örneklerdeki margin komutunu padding komutuyla değiştirirsek, dış mesafe oranları iç mesafe oranı olarak işlem görmeye başlayacaktır.



Sizde katılın!
E-posta adresinizi giriniz: Onay e-postası gönderilecektir. Gizliliğiniz Google FeedBurner ile güvence altında.

Yazar: Çalışıyor, geziyor, okuyor, öğreniyor ama en çok; içerik odaklı seo çalışmalarıyla ilgileniyor! Bu yüzdendir ki; bu blogda bu konuların ne işi var demeyin! O konularda bir fikre hayat vermek üzere olan denemeler var.

{ 8 yorum yapıldı… add one }
  • Sinem C. 31 Ocak 2015

    Benim sitemde bu şekildeydi.
    .get
    { margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px; }

    Ne gereksiz kod yığınıymış.
    .get
    { margin: 30px; }

    Buda aynı görevi gördü. Teşekkürler.

  • Murat DALAN 1 Şubat 2015

    Div’e bir türlü yerleştiremedim, ne yaptıysam olmadı. class=”bosluklar” şeklinde div’e ekledim ve stil dosyasına da bosluklar { padding: 20px 30px; } şekilde kodları ekledim. Hiç bir değişiklik olmadı, eksik olan bir şey mi var? Bunların dışında başka ne yapmam gerekiyor? Stil dosyasında bulunan diğer kodlarda değişiklik yapınca siteye yansıyor ama benim eklediğim kodların hiç bir etkisi olmuyor.

  • Kerem SARI 2 Şubat 2015

    Murat bey bir çok sebebi olabilir, stil dosyanızı ve uygulamak istediğiniz sayfanın dosyasını bana mail yoluyla gönderin sorunun ne olduğuna bakim. Öncesinde “(nokta).bosluklar { padding: 20px 30px; }” nokta olup olmadığını kontrol edin, belirttiğiniz stil kodunda nokta yok. Bazen çok basit “nokta”lar bizi uğraştırır.

  • Murat DALAN 2 Şubat 2015

    Çoktan çözdüm hocam, tamda dediğiniz gibi nokta koymamışım teşekkürler.

  • black code 6 Şubat 2015

    İç ve dışın mesafelerin birbirlerinden ne farkı var anlamadım. İkiside tanımladığımız div penceresinin çevresine olan mesafesini belirliyor. Yani bir dive üstten 10px mesafeyi padding’le de margin’le de versek 10px. Vardır bir hikmeti ama çözemedim.

    • Kerem SARI 8 Şubat 2015

      Uygulayacağınız div içerisinde arka plan rengi olduğunu düşünürseniz iç ve dış uygulama fark gösterecektir.

Bana yazın

#Mail adresiniz geçerli ise yorumunuz onaylandığında ve yorumunuza cevap verildiğinde mail yoluyla bilgilendirilirsiniz.

#Gönder butonuna tıkladığınız an yorumunuzun bana ulaşır. Onay beklediğine dair bilgilendirme mesajında geçici bir hata var.