CSS Podcast'i - 013: Boşluklar
Diyelim ki üst üste dizilmiş üç kutu var ve aralarında boşluk olmasını istiyorsunuz. CSS'de bunu yapmanın kaç yolu vardır?
margin
özelliği, ihtiyacınız olan şeyi sağlayabilir, ancak istemediğiniz ek boşluklar da ekleyebilir.
Örneğin, yalnızca bu öğelerin her biri arasındaki alanı nasıl hedeflersiniz?
Bu durumda gap
gibi bir ad daha uygun olabilir.
Bir kullanıcı arayüzünde boşluğu ayarlamanın
birçok yolu vardır. Bu yöntemlerin her birinin kendi güçlü yanları ve uyarıları bulunur.
HTML aralığı
HTML'nin kendisi, öğeleri yerleştirmek için bazı yöntemler sağlar.
<br>
ve <hr>
öğeleri, öğeleri blok yönünden yerleştirmenize olanak tanır. latin tabanlı bir dildeyseniz yukarıdan aşağıya doğrudur.
<br>
öğesi kullanırsanız tıpkı kelime işlemcide Enter tuşuna bastığınızda olduğu gibi satır sonu oluşturulur.
<hr>
, iki yanında boşluk olan yatay bir çizgi oluşturur. Bu çizgi, margin
olarak bilinir.
HTML öğelerinin yanı sıra HTML varlıkları da alan oluşturabilir.
HTML varlığı, tarayıcı tarafından karakter varlıklarıyla değiştirilen ayrılmış bir karakter dizesidir.
Örneğin, HTML dosyanıza ©
yazarsanız bu bir © karakterine dönüştürülür.
varlığı, satır içi boşluk sağlayan bölünmez bir boşluk karakterine dönüştürülür.
Yine de dikkatli olun,
çünkü bu karakterin ayrılmaz yanı iki öğeyi birbirine kaynaştırır ve tuhaf davranışlara yol açabilir.
Kârlılık
Bir öğenin dışına alan eklemek istiyorsanız margin
özelliğini kullanın.
Kenar boşluğu, öğenizin etrafına dolgu eklemek gibidir.
margin
özelliği margin-top
,
margin-right
, margin-bottom
ve margin-left
kelimesinin kısaltmasıdır.
margin
kısaltması, özellikleri belirli bir sırada uygular: üst, sağ, alt ve sol.
Şunları sorunca hatırlayabilirsiniz: TRouBLe.
margin
kısayolu bir, iki veya üç değerle de kullanılabilir.
Dördüncü bir değer eklemek, her bir tarafı ayrı ayrı ayarlamanıza olanak tanır.
Bunlar aşağıdaki şekilde uygulanır:
- Tüm kenarlara tek bir değer uygulanır. (
margin: 20px
). - İki değer: İlk değer üst ve alt kenarlara, ikinci değer sol ve sağ kenarlara uygulanır.
(
margin: 20px 40px
) - Üç değer: İlk değer
top
, ikinci değerleft
veright
ve üçüncü değerbottom
'dir. (margin: 20px 40px 30px
).
Kenar boşluğu; uzunluk, yüzde veya otomatik değerle (1em
veya 20%
gibi) tanımlanabilir.
Yüzde kullanırsanız değer, öğenizin kapsayıcı bloğunun genişliğine göre hesaplanır.
Diğer bir deyişle, öğenizin kapsayıcı bloğu 250px
genişliğinde ve öğenizin margin
değeri 20%
ise: öğenizin her iki tarafının hesaplanan kenar boşluğu 50px
olur.
Kenar boşluğu için auto
değerini de kullanabilirsiniz.
Kısıtlanmış boyuta sahip blok düzeyindeki öğeler için auto
kenar boşluğu, uygulandığı yönde kullanılabilir alanı kaplar.
Bunun iyi bir örneği, öğelerin birbirinden uzaklaştırdığı flexbox modülündeki.
auto
kenar boşluğuna ilişkin bir başka iyi örnek, maksimum genişliğe sahip yatay olarak ortalanmış bir sarmalayıcıdır.
Bu tür sarmalayıcılar, genellikle web sitesinde tutarlı bir merkez sütunu oluşturmak için kullanılır.
.wrapper {
max-width: 400px;
margin: 0 auto;
}
Burada, kenar boşluğu üst ve alt (blok) kenarlardan kaldırılır ve auto
, sol ve sağ (satır içi) kenarlar arasındaki alanı paylaşır.
Negatif kenar boşluğu
Kenar boşluğu için negatif değerler de kullanılabilir. Bitişik kardeş öğeler arasına boşluk eklemek yerine aralarındaki boşluk azaltılır. Kullanılabilir alandan daha büyük bir negatif değer belirtirseniz bu durum, öğelerin çakışmasına neden olabilir.
Kenar boşluğu daraltma
Kenar boşluğu daraltma karmaşık bir kavramdır, ancak arayüz oluştururken çok sık karşılaşacağınız bir şeydir. Üzerinde dikey kenar boşluğu bulunan bir başlık ve bir paragraf olmak üzere iki öğeniz olduğunu varsayalım:
<article>
<h1>My heading with teal margin</h1>
<p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>
h1 {
margin-bottom: 2rem;
}
p {
margin-top: 3rem;
}
İlk bakışta, paragrafın başlıktan 5em
aralıklı olacağı düşünülebilir. Çünkü 2rem
ve 3rem
toplamı 5rem
olarak hesaplanır.
Ancak dikey kenar boşluğu daraldığından, alan aslında 3rem
olur.
Kenar boşluğu daraltma, bitişik kenarlara ayarlanan dikey kenar boşluğuna sahip, bitişik iki öğeden en büyük değeri seçerek çalışır.
h1
öğesinin alt kısmı p
kenar boşluğunun üst kısmıyla buluşur. Dolayısıyla h1
öğesinin alt kenar boşluğu ile p
üst kenar boşluğunun en büyük değeri seçilir.
h1
alanının alt kenar boşluğunun 3.5rem
olması durumunda, ikisi arasındaki boşluk 3.5rem
olur çünkü bu değer 3rem
değerinden büyüktür.
Satır içi (yatay) kenar boşlukları değil, yalnızca blok kenar boşlukları daraltılır.
Kenar boşluğu daraltma, boş öğelerde de yardımcı olur.
Üst ve alt kenar boşluğu 20px
olan bir paragrafınız varsa yalnızca 20px
alan oluşturur (40px
değil).
Bu öğenin içine padding
dahil herhangi bir şey eklenirse kenar boşluğu artık kendi içinde daraltılmaz ve içerik barındıran herhangi bir kutu olarak değerlendirilir.
Öğrendiklerinizi sınayın
Marj daraltma hakkındaki bilginizi test edin
Birbirinin üzerine yığılmış iki öğenin her ikisinin de üst kenar boşluğu 20 piksel ve alt kenar boşluğu 30 pikselse aralarında ne kadar boşluk olur?
Kenar boşluğu daraltılmasını önleme
Bir öğeyi position: absolute
kullanarak tam olarak konumlandırılmış hale getirirseniz kenar boşluğu artık daraltılmaz.
float
özelliğini kullandığınızda da kenar boşluğu daralmaz.
Blok kenar boşluğuna sahip iki öğe arasında kenar boşluğu olmayan bir öğeniz varsa blok kenar boşluğuna sahip iki öğe artık komşu kardeşler olmadığından, kenar boşluğu da daraltılmaz.
Düzen dersinde flexbox ve ızgara kapsayıcılarının, blok container'lara çok benzer olduğunu, ancak bunların alt öğelerini çok farklı şekilde işlediğini öğrendiniz. Bu durum, kenar boşluğu daraltılmasında da geçerlidir.
Dersteki orijinal örneği alıp flexbox'ı sütun yönüyle uygularsak kenar boşlukları daraltılmak yerine birleştirilir. Bu, flexbox ve ızgara kapsayıcıları için tasarlanmış düzen çalışmasıyla öngörülebilirlik sağlayabilir.
Marj ve kenar boşluğu daraltmayı anlamak zor olabilir, ancak bunların nasıl çalıştığını ayrıntılı olarak anlamak çok faydalı olduğundan bu ayrıntılı açıklayıcıyı önemle tavsiye ederiz.
Dolgu
padding
özelliği, yalıtım gibi, kutunun dışında (margin
'de olduğu gibi) alan oluşturmak yerine kutunuzun içinde alan oluşturur.
Hangi kutu modelini kullandığınıza bağlı olarak (kutu modeli dersinde de ele alınmıştır) padding
, öğenin genel boyutlarını da etkileyebilir.
padding
özelliği padding-top
, padding-right
, padding-bottom
ve padding-left
kelimesinin kısaltmasıdır.
margin
gibi padding
işlevinin de mantıksal özellikleri vardır:
padding-block-start
, padding-inline-end
, padding-block-end
ve padding-inline-start
.
Konumlandırma
layout modülünde de ele alındığı üzere, position
için static
dışında bir değer ayarlarsanız öğelerin aralığını top
, right
, bottom
ve left
özellikleriyle ayarlayabilirsiniz.
Bu yön değerlerinin davranışı ile ilgili bazı farklılıklar vardır:
position: relative
içeren bir öğe, bu değerleri ayarlasanız bile belge akışındaki yerini korur. Bunlar da öğenizin konumuna göre belirlenir.position: absolute
içeren bir öğe, yön değerlerini göreli üst öğenin konumundan temel alır.position: fixed
içeren bir öğe, yön değerlerini görüntü alanını temel alır.position: sticky
içeren bir öğe, yön değerlerini yalnızca yuvaya yerleştirilmiş/takılı durumda olduğunda uygular.
Mantıksal özellikler modülünde, yazma moduna uygun yön değerleri ayarlamanıza olanak tanıyan inset-block
ve inset-inline
özellikleri hakkında bilgi edinebilirsiniz.
Her iki özellik de start
ve end
değerlerini birleştiren kısaltmalardır. Bu nedenle, start
ve end
için ayarlanacak bir değeri veya iki ayrı değeri kabul eder.
Izgara ve flexbox
Son olarak, hem ızgarada hem de flexbox'ta alt öğeler arasında boşluk oluşturmak için gap
özelliğini kullanabilirsiniz.
gap
özelliği, row-gap
ve column-gap
ifadesinin kısaltmasıdır ve uzunluk veya yüzde olabilen bir veya iki değeri kabul eder.
unset
, initial
ve inherit
gibi anahtar kelimeler de kullanabilirsiniz.
Yalnızca bir değer tanımlarsanız hem satırlara hem de sütunlara aynı gap
uygulanır. Ancak her iki değeri de tanımlarsanız ilk değer row-gap
, ikinci değer ise column-gap
olur.
Hem flexbox hem de ızgarada, dağıtım ve hizalama özelliklerini kullanarak alan oluşturabilirsiniz. Bu özellikleri ızgara modülü ve flexbox modülünde ele aldık.
Tutarlı boşluk oluşturma
İyi bir akış ve ritme sahip, tutarlı bir kullanıcı arayüzü oluşturmak için bir strateji seçmek ve bu stratejiye bağlı kalmak gerçekten çok iyi bir fikirdir. Boşlukları için tutarlı ölçümler yaparak bunu başarabilirsiniz.
Örneğin, öğeler arasındaki tüm boşluklar (oluklar olarak bilinir) için tutarlı bir ölçü olarak 20px
kullanmayı tercih edebilirsiniz. Böylece tüm düzenler tutarlı görünür ve hissedilir.
Ayrıca, akış içeriği arasında dikey boşluk olarak 1em
kullanmaya karar verebilirsiniz. Böylece öğenin font-size
özelliğine göre tutarlı bir boşluk elde edilir.
Seçiminiz ne olursa olsun, bu değerleri jetona dönüştürmek ve tutarlılığı biraz daha kolay hale getirmek için bu değerleri değişkenler (veya CSS özel özellikleri) olarak kaydetmeniz gerekir.
:root {
--gutter: 20px;
--spacing: 1em;
}
h1 {
margin-left: var(--gutter);
margin-top: var(--spacing);
}
Bunun gibi özel özellikler kullanmak, bunları bir kez tanımlamanıza ve ardından CSS'nizin tamamında kullanmanıza olanak tanır. Bir öğenin içinde yerel olarak veya global olarak güncellendiğinde değerler şelaleden geçirilir ve güncellenen değerler yansıtılır.
Öğrendiklerinizi sınayın
Boşluklarla ilgili bilginizi test edin
Şu durumlarda boşluk eklemek için HTML kullanılabilir:
Bir kutunun içinde alan oluşturmak için şunu kullanın:
Kutunun dışında alan oluşturmak için şunu kullanın:
Kutular arasında boşluk oluşturmak için şunu kullanın: