Boşluk

CSS Podcast'i - 013: Boşluk Kullanımı 'nı inceleyin.

Üç kutudan oluşan bir koleksiyonunuz olduğunu varsayalım. üst üste yığılmış ve aralarında boşluk olmasını istiyorsunuz. Bunu CSS'de kaç şekilde yapabilirsiniz?

margin özelliği ihtiyacınız olanı size sağlayabilir, ancak istemediğiniz fazladan boşluklar ekleyebilir. Örneğin, bu öğelerin her birinin arasındaki alanı nasıl hedeflersiniz? Bu durumda gap gibi bir değer daha uygun olabilir. Kullanıcı arayüzünde aralıkları ayarlamanın birçok yolu vardır. her birinin kendine özgü güçlü yanları ve uyarıları var.

HTML aralığı

HTML'nin kendisi, öğeleri alan için bazı yöntemler sağlar. <br> ve <hr> öğeleri, öğeleri blok yönünde, Latin kökenli bir dildeyseniz yukarıdan aşağıya doğrudur.

<br> öğesi kullanırsanız bir satır sonu oluşturur. Tıpkı kelime işlemcide Enter tuşuna bastığınız gibi.

<hr>, iki tarafında da boşluk bulunan yatay bir çizgi oluşturur. Bu çizgiye margin denir.

HTML öğelerini kullanmanın yanı sıra HTML varlıkları 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 bir © karakterine dönüştürülür.   varlığı, bölünmez boşluk karakterine dönüştürülür. alan sağlar. Yine de dikkatli olun. Çünkü bu karakterin ayrılmaz özelliği, iki öğeyi birbirine bağladığı için Bunun sonucunda tuhaf davranışlara neden olabilir.

Kârlılık

Bir öğenin dışına boşluk eklemek isterseniz margin özelliğini kullanırsınız. Kenar boşluğu, öğenizin etrafına dolgu eklemeye benzer. margin özelliği margin-top ifadesinin kısaltmasıdır, margin-right, margin-bottom ve margin-left.

margin kısaltması, özellikleri belirli bir sırada uygular: üst, sağ, alt ve sol. Bunları zor bir şekilde hatırlayabilirsiniz: TRouBLe.

margin kısaltması bir, iki veya üç değerle de kullanılabilir. Dördüncü bir değer ekleyerek her bir tarafı ayrı ayrı ayarlayabilirsiniz. Bu düzenlemeler 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 uygulanır, ikinci değer de sol ve sağ taraflara uygulanır. (margin: 20px 40px)
• Üç değer: İlk değer top, ikinci değer left ve right ise ve üçüncü değer bottom. (margin: 20px 40px 30px).

Kenar boşluğu bir uzunluk, yüzde veya otomatik değer, örneğin 1em veya 20%. Yüzde kullanıyorsanız değer, öğenizin içeren bloğunun genişliğine göre hesaplanır.

Bu, öğenizin içeren blokunun genişliği 250px olduğu anlamına gelir. ve öğeniz margin 20% değerine sahip: öğenizin her bir kenarının hesaplanan kâr marjı 50px olacaktır.

Kenar boşluğu için auto değeri de kullanabilirsiniz. Kısıtlı boyuta sahip blok seviyesinde öğeler için: auto kenar boşluğu, uygulandığı yönde kullanılabilir alanı kaplar. Bu, iyi bir örnek. fleks kutu modülünden, öğelerin birbirinden uzaklaşmasına neden olur.

auto kenar boşluğuna ilişkin iyi bir başka örnek de, maksimum genişliğe sahip yatay olarak ortalanmış bir sarmalayıcıdır. Bu tür sarmalayıcı, genellikle web sitesinde tutarlı bir orta sütun oluşturmak için kullanılır.

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

Burada kenar boşluğu, üst ve alt (engelleme) taraflardan kaldırılır. auto ise sol ve sağ (satır içi) taraflar arasındaki boşluğu 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 öğeler arasındaki boşlukları azaltır. Bu durum, öğelerin çakışmasına, 'i kullanabilirsiniz.

Kenar boşluğu daraltma

Marj çöküşü karmaşık bir kavramdır ancak arayüz oluştururken çok sık karşılaşacağınız bir şeydir. İki öğeniz olduğunu varsayalım: Bir başlık ve bir paragrafta dikey kenar boşluğu var:

<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 ve çü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 iki öğenin en büyük değeri seçilerek çalışır bitişik kenarlarda dikey kenar boşluğu ayarlanır. h1, p değerinin üst kısmıyla buluşuyor, Bu nedenle, h1 öğesinin alt kenar boşluğunun ve p üst kenar boşluğunun en büyük değeri seçilir. h1 için alt kenar boşluğu 3.5rem olsaydı bu durumda ikisi arasındaki boşluk 3rem değerinden büyük olduğundan 3.5rem olur. Satır içi (yatay) kenar boşlukları değil, yalnızca kenar boşlukları daraltılır.

Kenar boşluğu daraltma, boş öğelerde de işe yarar. Üst ve alt kenar boşluğu 20px olan bir paragrafınız varsa bu yalnızca 20px alan oluşturur: 40px değil. Ancak bu öğenin içine herhangi bir şey eklenirse, padding dahil olmak üzere kenar boşluğu artık kendiliğinden daraltılmaz ve içerik barındıran kutular gibi işlenir.

Öğrendiklerinizi sınayın

Kenar boşluğu daraltma bilginizi test edin

Kenar boşluğunun daraltılması önleniyor

Bir öğeyi kesin olarak konumlandırırsanız position: absolute kullanıldığında kenar boşluğu artık daraltılmaz. float özelliğini kullandığınızda da kenar boşluğu daraltılmaz.

Blok kenar boşluğuna sahip iki öğe arasında kenar boşluğu olmayan bir öğeniz varsa kenar boşluğu da daraltılmaz çünkü blok kenar boşluğuna sahip olan iki öğe artık bitişik kardeş değil. Bunlar sadece kardeştir.

Düzen dersinde, Flexbox ve ızgara kapsayıcılarının blok kapsayıcılara çok benzediğini öğrendiniz. alt öğelerini çok farklı şekilde ele alıyor. Bu durum, kenar boşluğunun daraltılmasında da geçerlidir.

Dersten alınan orijinal örneği alıp sütun yönüne sahip flexbox'ı uygularsak birleştiğinde gösterilir. yerine daraltılmış hâldedir. Bu, düzen çalışmasıyla ilgili öngörülebilirlik sağlar. flexbox ve ızgara kapsayıcılarının tasarlandığı alandır.

Kenar boşluğu ve kenar boşluğunun daralması anlamak zor olabilir. Ancak bunların nasıl çalıştığını ayrıntılı olarak anlamak, Bu ayrıntılı açıklayıcı videoyu kesinlikle önerilir.

Dolgu

Kutunuzun dışında alan oluşturmak yerine olduğu gibi, margin padding özelliği, kutunuzun içinde alan oluşturur: yalıtım gibi.

Kullandığınız kutu modeline bağlı olarak box modeli dersi —padding, öğenin genel boyutlarını da etkileyebilir.

padding özelliği padding-top, padding-right, padding-bottom ve padding-left değerlerinin kısaltmasıdır. margin gibi, padding de mantıksal özelliklere sahiptir: padding-block-start, padding-inline-end, padding-block-end ve padding-inline-start.

Konumlandırma

layout modülünde, position için static dışında bir değer ayarlarsanız top, right, bottom ve left özellikleriyle öğeleri boşluk bırakabilirsiniz. Bu yönsel değerlerin davranışıyla ilgili bazı farklılıklar vardır:

• position: relative içeren bir öğe, belge akışında yerini korur. bu değerleri ayarlamış olsanız bile ekleyebilirsiniz. Bunlar da öğenizin konumuna göre değişir.
• position: absolute içeren bir öğe göreceli üst öğenin konumundan yön değerleri temel alınır.
• position: fixed içeren bir öğe yön değerleri görüntü alanına dayalı olur.
• position: sticky içeren bir öğe yönsel değerleri yalnızca yuvaya yerleştirilmiş/sıkışmış durumundayken uygular.

Mantıksal özellikler modülünde, inset-block ve inset-inline özellikleri hakkında bilgi edinirsiniz. Böylece yazma moduna uygun yön değerleri belirleyebilirsiniz.

Her iki özellik de start ve end değerlerini birleştiren kısaltmalardır ve bu nedenle, start ve end için ayarlanacak bir değeri kabul edin veya değer katarlar.

Izgara ve flexbox

Son olarak, hem ızgara hem de flexbox'ta, alt öğeler arasında alan oluşturmak için gap özelliğini kullanabilirsiniz. gap özelliği, row-gap ve column-gap terimlerinin kısaltmasıdır, uzunluk veya yüzde olabilecek bir veya iki değer kabul eder. unset, initial ve inherit gibi anahtar kelimeler de kullanabilirsiniz. Yalnızca tek bir değer tanımlarsanız hem satırlara hem de sütunlara aynı gap uygulanır ve Ancak her iki değeri de tanımlarsanız ilk değer row-gap, ikinci değer column-gap.

Hem flexbox hem de ızgarada, dağıtım ve hizalama özelliklerini kullanarak da alan oluşturabilirsiniz. Bu metodolojileri grid modülü ve flexbox modülü.

Tutarlı boşluklar oluşturma

İyi bir strateji belirlemek ve buna bağlı kalmak, iyi bir akış ve ritme sahip tutarlı bir kullanıcı arayüzü oluşturmanıza yardımcı olur. Bunu sağlamanın iyi bir yolu, boşluklar için tutarlı ölçümler kullanmaktır.

Örneğin, 20px kullanmayı taahhüt edebilirsiniz öğeler arasındaki tüm boşluklar için tutarlı bir ölçüm olarak; tutarlı bir görünüm ve tarza sahiptir. Akış içerikleri arasında dikey boşluk olarak 1em kullanmaya da karar verebilirsiniz. Böylece, öğenin font-size değerine göre tutarlı boşluklar sağlanır. Hangisini seçerseniz seçin, bu değerleri değişken (veya CSS özel özellikleri) olarak kaydetmeniz gerekir. tutarlılığı biraz daha kolay hale getirmek için birlikte çalıştık.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

Bunun gibi özel özellikleri kullanmak, bunları bir kez tanımlamanıza olanak tanır. daha sonra bunları CSS'nizde kullanabilirsiniz. Bunlar güncellendiğinde bir öğenin içinde yerel olarak veya genel olarak değerler kademeli olarak aktarılır ve güncellenen değerler yansıtılır.

Öğrendiklerinizi sınayın

Boşluk bırakmayla ilgili bilginizi test edin