css

Css dış ve iç boşluklar belirlemek

yazar

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.

“Css dış ve iç boşluklar belirlemek” üzerine 8 yorum

  1. 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.

    Yanıtla

  2. 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.

    Yanıtla

  3. 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.

    Yanıtla

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

    Yanıtla

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

      Yanıtla

Yorum yapın