birblog

Css dış ve iç boşluklar belirlemek

css

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 uygulayabilirsiniz fakat örneklerdeki gibi uygulamanızı tavsiye ederim. Bütün tarayıcılara uyumludur.

Not: Margin komutu div’e veya diğer tag’lara “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.

Anasayfa » Webmaster
Css dış ve iç boşluklar belirlemek

Kategori:

Yazar:

Kerem SARI

Etiketler:

Yorumlar

“Css dış ve iç boşluklar belirlemek” için 8 cevap

  1. Sinem C. avatarı
    Sinem C.

    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.

    Cevapla
    1. Kerem SARI avatarı
      Kerem SARI

      Rica ederim.

      Cevapla
  2. Murat DALAN avatarı
    Murat DALAN

    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.

    Cevapla
  3. Kerem SARI avatarı
    Kerem SARI

    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.

    Cevapla
  4. Murat DALAN avatarı
    Murat DALAN

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

    Cevapla
    1. Kerem SARI avatarı
      Kerem SARI

      Rica ederim.

      Cevapla
  5. black code avatarı
    black code

    İç 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.

    Cevapla
    1. Kerem SARI avatarı
      Kerem SARI

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

      Cevapla

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir