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ğerleftverightve üçü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: relativeiçeren bir öğe, bu değerleri ayarlasanız bile belge akışındaki yerini korur. Bunlar da öğenizin konumuna göre belirlenir.position: absoluteiçeren bir öğe, yön değerlerini göreli üst öğenin konumundan temel alır.position: fixediçeren bir öğe, yön değerlerini görüntü alanını temel alır.position: stickyiç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: