Kutu modeli: CSS dış boşluğu
- Önceki Sayfa CSS Kenar
- Sonraki Sayfa CSS Kenar Boşluğu Birleşimi
Elemanın çerçeve etrafındaki boş alan, dış boşluk olarak adlandırılır. Dış boşluk ayarlamak, elemanın dışında ekstra 'boşluk' oluşturur.
Dış boşlukları ayarlamak için en basit yöntem, marj özelliğini kullanmaktır, bu özellik herhangi bir uzunluk birimini, yüzdelik değerleri hatta negatif değerleri kabul eder.
CSS margin Özelliği
Dış boşlukları ayarlamak için en basit yöntem marj özelliği.
marj özelliği, herhangi bir uzunluk birimini kabul eder, bu birimler piksel, inç, milimetre veya em olabilir.
marj, auto olarak ayarlanabilir. Daha yaygın bir uygulama, dış boşluklara uzunluk değerleri ayarlaktır. Aşağıdaki ifade, h1 öğesinin her kenarına 1/4 inç genişliğinde boşluk ayarlar:
h1 {marjın : 0.25in;}
Aşağıdaki örnek, h1 öğesinin dört kenarına farklı dış boşluklar tanımladığını gösterir, kullanılan uzunluk birimi piksel (px) olupudur:
h1 {marjın : 10px 0px 15px 5px;}
İç marj ayarlarıyla aynı şekilde, bu değerlerin sırası, element etrafında saat yönünde dönerken üst dış marj (üst) ile başlar:
marj: üst sağ alt sol
Ayrıca, marj için bir yüzdelik değer de belirtebilirsiniz:
p {marj : 10%;}
Yüzde değerleri, ebeveyn elementin genişliğine göre hesaplanır. Yukarıdaki örnekte, p elementine belirlenen marj, ebeveyn elementin genişliğinin %10'unudur.
marj'in varsayılan değeri 0'dır, bu yüzden marj için bir değer belirlenmemişse, marj görünmez olur. Ancak, gerçek hayatta, tarayıcılar birçok element için önceden tanımlanmış stiller sağlar, marj de bu elementlerden biridir. Örneğin, CSS'yi destekleyen tarayıcılar her bir paragraf elementinin üzerinde ve altında 'boş satır' oluşturur. Bu yüzden, p elementi için marj belirlenmemişse, tarayıcı kendi marjını uygulamaya çalışabilir. Tabii ki, özel olarak belirttiğinizde, varsayılan stilleri geçersiz kılar.
Değer kopyalama
Unutmayın mı? İlk iki bölümde değeri kopyalama hakkında bahsetmiştik. Aşağıda, size değeri kopyalama nasıl kullanılacağını açıklayacağız.
Bazen, bazı tekrarlı değerler gireriz:
p {marj: 0.5em 1em 0.5em 1em;}
Değer kopyalama ile, bu çift sayıları tekrar tekrar yazmak zorunda kalmazsınız. Yukarıdaki kural, aşağıdaki kurala eşittir:
p {marj: 0.5em 1em;}
Bu iki değer, önceki dört değeri değiştirebilir. Bu nasıl yapılır? CSS, marj için dörtten daha az değer belirtmeyi mümkün kılar. Kurallar şu şekildedir:
- Sol marj değeri eksikse, sağ marj değeri kullanılır.
- Alt marj değeri eksikse, üst marj değeri kullanılır.
- Sağ marj değeri eksikse, üst marj değeri kullanılır.
Aşağıdaki resim, bu konuyu daha görsel bir şekilde anlamanızı sağlar:

Diyelim ki, marj için üç değer belirlendi, dördüncü değer (sağ marj) ikinci değerden (sol marj) kopyalanır. İki değer verildiğinde, dördüncü değer ikinci değerden kopyalanır, üçüncü değer (alt marj) birinci değerden (üst marj) kopyalanır. Son durumda, sadece bir değer verildiğinde, diğer üç marj bu değere (üst marj) kopyalanır.
Bu basit mekanizmayı kullanarak, gerekli olan değerleri belirtmeniz yeterlidir, dört değeri hepsini uygulamak zorunda değilsiniz, örneğin:
h1 {marj: 0.25em 1em 0.5em;} /* Buna 0.25em 1em 0.5em 1em den denktir */ h2 {marj: 0.5em 1em;} /* Buna 0.5em 1em 0.5em 1em den denktir */ p {margin: 1px;} /* 1px 1px 1px 1px eşdeğer */
Bu yöntemin küçük bir dezavantajı var, sonunda bu sorunu karşılaşacaksınız. p elementinin üst dış kenar boşluğu ve sol dış kenar boşluğunu 20 piksel olarak, alt dış kenar boşluğu ve sağ dış kenar boşluğunu 30 piksel olarak ayarlamak istiyorsanız, bu durumda aşağıdaki gibi yazmanız gerekecek:
p {margin: 20px 30px 30px 20px;}
Bu şekilde istediğiniz sonucu elde edebilirsiniz. Ancak, bu durumda gerekli değer sayısını daha az sayıda yazmanın bir yolu yoktur.
Bir diğer örnekte daha bakalım. Eğer sadece sol dış kenar boşluğu dışında diğer tüm dış kenar boşlukları auto (sol dış kenar boşluğu 20px) olacaksa:
p {margin: auto auto auto 20px;}
Aynı şekilde, bu şekilde istediğiniz etkileri elde edebilirsiniz. Sorun, bu auto'ların yazılması biraz zor. Elementin tek kenarındaki dış kenar boşluklarını kontrol etmek istiyorsanız, tek kenar dış kenar boşluğu özelliklerini kullanın.
Tek kenar dış kenar boşluğu özellikleri
Tek kenar dış kenar boşluğu özelliklerini kullanarak elementin tek kenarındaki dış kenar boşluğu değerlerini ayarlayabilirsiniz. p elementinin sol dış kenar boşluğunu 20px olarak ayarlamak istiyorsanız, margin kullanmak (bir çok auto yazmanız gerekecek) yerine aşağıdaki yöntemi kullanabilirsiniz:
p {margin-left: 20px;}
Yalnızca belirli bir kenarı dış kenar boşluğu olarak ayarlamak istiyorsanız, diğer tüm dış kenar boşluklarını etkilemeksizin aşağıdaki herhangi bir özelliği kullanabilirsiniz:
Bir kuralda birden fazla bu tek kenar özelliği kullanılabilir, örneğin:
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
Elbette, bu durumda, margin kullanmak daha kolay olabilir:
p {margin: 20px 30px 30px 20px;}
Tek kenar özelliği kullanılsa bile veya margin kullanılsa bile elde edilen sonuçlar aynıdır. Genel olarak, birden fazla kenarı kenar boşluğu olarak ayarlamak istiyorsanız, margin kullanmak daha kolay olur. Ancak, belge görüntüleme açısından, aslında hangi yöntemin kullanılması önemli değil, bu yüzden kendiniz için daha kolay olan yöntemi seçmelisiniz.
İpucu ve açıklamalar
İpucu:Netscape ve IE, body etiketi için tanımlanan varsayılan kenar boşluğu (margin) değeri 8px'dir. Ancak Opera böyle değil. Tam tersine, Opera'nın varsayılan iç doldurma (padding) değeri 8px olarak tanımlanmıştır, bu yüzden tüm web sitesinin kenar bölgelerini ayarlamak ve Opera'da doğru bir şekilde görüntülemek istiyorsanız, body'nin padding'ını özelleştirmeniz gerekecektir.
CSS dış kenar boşluğu örneği:
- Metin sol dış kenar boşluğunu ayarla
- Bu örnek, metnin sol kenar boşluğunu nasıl ayarlandığını gösterir.
- Metnin sağ kenar boşluğu ayarı
- Bu örnek, metnin sağ kenar boşluğunu nasıl ayarlandığını gösterir.
- Metnin üst kenar boşluğu ayarı
- Bu örnek, metnin üst kenar boşluğunu nasıl ayarlandığını gösterir.
- Metnin alt kenar boşluğu ayarı
- Bu örnek, metnin alt kenar boşluğunu nasıl ayarlandığını gösterir.
- Tüm dış kenar boşluğu özellikleri bir açıklamada.
- Bu örnek, tüm dış kenar boşluğu özelliklerinin bir açıklamada nasıl ayarlanacağını gösterir.
CSS Kenar Boşluğu Özellikleri
Özellik | Açıklama |
---|---|
margin | Kısa Özellik. Tüm dış kenar boşluğu özelliklerini bir açıklamada ayarlayın. |
margin-bottom | Aşağı kenar boşluğu ayarı. |
margin-left | Sol kenar boşluğu ayarı. |
margin-right | Sağ kenar boşluğu ayarı. |
margin-top | Ayrıntılı kenar boşluğu ayarı. |
- Önceki Sayfa CSS Kenar
- Sonraki Sayfa CSS Kenar Boşluğu Birleşimi