Göreceli dolgu değeri. CSS kenar boşluğu ve dolgusu nasıl ayarlanır (ve harika düzen ipuçları). Hatırlanması gerekenler

Yazardan: CSS öğrenmeye ilk başladığımda kenar boşluğu ve dolgu konusunda kafam sürekli karışıyordu. Çok benzer görünüyorlardı ve bazı durumlarda aynı sonucu veriyorlardı. Bu eğitimde CSS kenar boşluğu ile dolgu arasındaki farkı ve bu özelliklerin sayfadaki öğeler arasındaki boşluğu nasıl etkilediğini göreceksiniz. Ayrıca duyarlı web siteleri oluştururken marjların daraltılmasını ve farklı ölçü birimlerinin kullanılmasını da tartışacağız. Makaleyi kenar boşluğu ve dolgu kullanımıyla ilgili birkaç ipucuyla bitireceğiz.

Blok modeli

CSS'deki öğeler dikdörtgen kutular olarak temsil edilir. Dikdörtgen bir bloğun boyutu, öğenin özelliklerine göre belirlenir: içerik, dolgu, çerçeve, kenar boşluğu.

Öğenin içerik alanı ortada bulunur. Daha sonra dolgu içerik alanını çevreler. Çerçeve dolguyu çevreler ve kenar boşluğu dış katmandır, yani. elementin dışındadır. Neden bahsettiğimizi daha iyi anlamak için aşağıda bir şema bulunmaktadır.

Diyagramdan görebileceğiniz gibi dolgu, bir öğeyi içerik alanının dış kenarından çerçevenin iç kenarına kadar uzatan bir katmandır. Bu özellik, öğenin kenarlığı ile içeriği arasındaki mesafeyi kontrol eder. Dolgu, sayfadaki bir öğenin boyutunu etkiler ancak sayfadaki öğeler arasındaki boşluk üzerinde hiçbir etkisi yoktur.

Öğeler arasındaki mesafeyi artırmanız veya azaltmanız gerekiyorsa kenar boşluğunu kullanın. Marj özelliği, öğenin boyutunu hiçbir şekilde etkilemez.

Bir web sayfasındaki tüm blokların boyutlarının kullanılan blok modeline bağlı olduğunu unutmamak önemlidir. İki blok modeli vardır: W3C blok modeli, geleneksel blok modeli.

W3C blok modeline göre bir elemanın genişliği, dolgu ve kenar boşluğu dikkate alınmadan bloğun içeriğinden hesaplanır. Üstüne dolgu ve kenarlık eklenir verilen boyutlar sayfa düzeni açısından beklenmeyen sonuçlara yol açabilir.

Örneğin genişliği 200px, yüksekliği 200px, her tarafı 10px dolgulu ve her tarafı 2px kenarlıklı bir blok ele alalım. Tarayıcı 200px bloğunu görmüyor. Tarayıcı, bloğu görüntülemek için gereken yatay alanı hesaplar ve 224 pikseldir: 200(genişlik)+2(sol kenarlık)+10(sol dolgu)+10(sağ dolgu)+2(sağ kenarlık)=224 piksel. Bu bir kare olduğundan yüksekliği de 224 piksel olacaktır.

Geleneksel blok modeli ise genişlik olarak içerik, dolgu ve kenarlık toplamını alır. Bu, bloğunuz 200 piksel genişliğindeyse tarayıcının onu görüntülemek için gereken yatay alanı hesaplayacağı ve dolgu ve kenarlık dahil 200 piksel olacağı anlamına gelir. Sonuç daha öngörülebilir ve üzerinde çalışılması daha kolaydır.

Varsayılan olarak tüm tarayıcılar W3C blok modelini kullanır. Model, kutu boyutlandırma özelliği kullanılarak manuel olarak ayarlanabilir. İki değer kabul edilir: içerik kutusu (W3C) ve kenar kutusu (geleneksel model). Geleneksel model daha sezgiseldir ve bu da onu web geliştiricileri arasında en popüler hale getirmiştir.

Projenizde geleneksel modeli kullanmak için kutu boyutlandırmayı nasıl kullanacağınız aşağıda açıklanmıştır:

html ( kutu boyutlandırma: kenarlık kutusu; ) *, *:önce, *:sonra ( kutu boyutlandırma: devralma; )

HTML (

kutu - boyutlandırma : border - box ;

* , * : önce sonra (

kutu boyutlandırma: devralma;

İşleri kendi başınıza yaptığınızda işleri daha hızlı hatırlıyorsanız Guy Routledge'ın eğlenceli interaktif demosunu denemeyi deneyin.

Kenar boşluğunu ve dolguyu ayarlama

Bir öğenin dört tarafındaki dolguyu kontrol etmek için padding-top, padding-right, padding-bottom ve padding-left özelliklerini kullanabilirsiniz. Dolgu ayrıca bir kısayol özelliği aracılığıyla da belirtilebilir. Tek bir dolgu değeri yazılırsa, CSS bunu 4 tarafın tamamı için dolguyu belirlemek için kullanır:

/* 4 kenarın tamamı */ padding: 10px;

3 değer sunulursa, birincisi üstten, ikincisi sol ve sağdan, üçüncüsü alttan sorumludur:

/* üst | yatay | alt */ dolgu: 1em 20px 2em;

4 değerin tümü sunulursa, her biri sırasıyla üst, sağ, alt ve soldan sorumludur:

/* üst | sağ | alt | sol */ dolgu: 10px %10 2em %15;

Aşağıdaki demoda, turuncu arka plan farklı öğelerin içerik alanıdır, çerçeve ile içerik arasındaki beyaz alan ise dolgudur:

Dış kenar boşluğu, tıpkı dolgulama gibi, kenar boşluğu üst, kenar boşluğu sağ, kenar boşluğu alt ve kenar boşluğu sol özellikleri kullanılarak 4 tarafın tamamında kontrol edilebilir. Ayrıca steno özelliğini kullanarak 4 kenar için de kenar boşluğunu aynı anda ayarlayabilirsiniz.

/* 4 kenarın tümü */ kenar boşluğu: 10 piksel; /* dikey | yatay */ kenar boşluğu: 2em 4em; /* üst | yatay | alt */ kenar boşluğu: 2em otomatik 2em; /* üst | sağ | alt | sol */ kenar boşluğu: 10px %10 2em %15;

Hatırlanması gerekenler

Doğru ölçü birimlerini kullanın

Dolgu ve kenar boşluğuyla çalışırken mutlak ölçü birimlerinden kaçının. Bu tür birimler yazı tipi boyutları ve ekran genişliğindeki değişikliklere uyum sağlamaz.

Diyelim ki öğenin genişliğini %50'ye ve kenar boşluğunu 15 piksele ayarladınız. 1200 piksel genişliğinde öğenin genişliği 600 piksel, kenar boşluğu ise 15 piksel olacaktır. 769 piksel genişlikte öğenin genişliği 384 piksel olacak ve kenar boşluğu hala 15 piksel olacaktır.

Öğenin genişliği %36 oranında değişti ancak kenar boşluğu aynı kaldı. Çoğu durumda bu en büyük sorun değildir. Ancak öğenin kenar boşluğunu bir yüzdeye ayarlarsanız tüm ekranlardaki sayfa düzeni üzerinde daha fazla kontrole sahip olursunuz. Uygulanan kenar boşluğu ve dolgu değerlerinde ani sıçramalar olmadan her şey orantılı görünecektir.

Benzer şekilde sayfadaki metin öğelerine dolgu eklemek isteyebilirsiniz. Çoğu durumda dolgunun öğedeki yazı tipi boyutuyla orantılı olmasını istersiniz. Bunu mutlak birimlerle yapmak imkansızdır. Ancak dolguyu em olarak ayarlarsanız yazı tipi boyutuna otomatik olarak ayarlanacaktır. Aşağıdaki demo ölçeklendirmeyi çalışırken göstermektedir.

Tarayıcılar farklı ölçü birimleri için kenar boşluğunu ve dolguyu nasıl hesaplar?

Tarayıcılar, ölçü birimlerine bağlı olarak son kenar boşluğu ve dolgu değerlerini farklı şekilde hesaplar.

Yüzde olarak belirtilen kenar boşluğu ve dolgu, kabın genişliğine göre hesaplanır. Yani, kap genişliği 100 piksel ise %5 dolgu 5 piksele, kap genişliği 1000 piksel ise 50 piksele eşit olacaktır. Üst ve alt değerlerin de kabın genişliğine göre hesaplandığını unutmayın.

Em durumunda kenar boşluğu ve dolgu, öğenin yazı tipi boyutuna bağlıdır. Önceki demoda, alttaki üç metin öğesinin dolgusu 1em'dir. Farklı yazı tipi boyutları nedeniyle hesaplanan dolgu değeri her zaman farklı olacaktır.

Ayrıca vw, vh, vmin ve vmax olmak üzere 4 adet görüntüleme alanı ölçüm birimi vardır. Bu durumda kenar boşluğu ve dolgu değerleri görünüm alanına bağlı olacaktır. Örneğin, 5vw dolgusu, 500 piksellik bir görünüm alanı genişliğinde 25 piksele eşit olacaktır ve aynı görünüm alanında 10vw dolgusu 50 piksele eşit olacaktır. Bu ölçü birimlerini SitePoint web sitesindeki "Ölçü Birimlerinin CSS Görünümü: Hızlı Başlangıç" makalesinde daha ayrıntılı olarak inceleyebilirsiniz.

Yeni başlayan biriyseniz, bu birimlerin nasıl çalıştığını bilmek, HTML öğelerindeki dolgu ve kenar boşluğunun neden ana öğenin, yazı tipinin ve hatta görünüm alanının boyutuna bağlı olarak değiştiğini hızlı bir şekilde anlamanıza yardımcı olacaktır. Bu da size düzeninizi kontrol etme yeteneği verecektir.

Kenar boşluklarının daralması

Ayrıca marjların daralması kavramını da bilmeniz gerekir. Bazı durumlarda, iki öğenin üst ve alt kenar boşlukları tek bir öğeye dönüşebilir. Bu olaya marj çöküşü denir.

Diyelim ki birbirinin altında iki öğeniz var, yani. aynı seviyede. İlk öğede kenar boşluğunu 40 piksel, ikincisinde kenar boşluğunu 25 piksel olarak ayarlarsanız, öğeler arasındaki toplam kenar boşluğu 65 piksele eşit olmayacaktır. Girinti, daha büyük kenar boşluğunun değerine eşit olacaktır; 40 piksel.

Benzer şekilde, ebeveyn ile ilk veya son çocuk arasındaki marj daralabilir. Bu durum, alt ve üst kenar boşluklarını ayıran kenarlık, dolgu veya satır içi içerik olmadığında meydana gelir. Bu durumda, ebeveyn üzerinde herhangi bir dolgu veya kenarlık yoksa, alt öğenin kenar boşluğu üst öğeden "akacaktır".

Bu davranış düzeltilebilir. Bunu yapmak için ebeveyn ve alt kenar boşlukları arasına bir bariyer eklemeniz gerekir. Aşağıdaki demo, ana öğeye kenarlık veya dolgu eklemenin sorunu nasıl çözebileceğini göstermektedir.

Negatif marjlar durumunda, daraltılmış marjın nihai değeri, pozitif marjın en küçük negatif olanla toplamına eşittir. Daralan marjlar konusunu Adam Roberts'ın “Collapsing Margins” makalesinde daha ayrıntılı olarak inceleyebilirsiniz.

Kenar boşluğunu ve dolguyu kullanmanın ilginç yolları

Bazen kenar boşluğu ve dolgu, düzen sorunlarını çözmeye yardımcı olabilir. Aşağıda bazı örnekler verilmiştir:

Görüntülerde en boy oranını koruyun

Genellikle bir sayfadaki görsellerin farklı en boy oranları vardır. Tüm resimleri aynı en boy oranında göstermeniz gerekiyorsa CSS dolgusu size yardımcı olacaktır.

Bunu yapmak için ebeveynin yüksekliğini sıfıra ayarlamanız gerekir ve ebeveynin padding-top özelliği, yüzde olarak ifade edilen en boy oranı değerine eşit olmalıdır.

Örneğin, dolgulamayla 16:9'luk bir en-boy oranı elde edilir: %56,25 0 0 0. 56,25 değeri (9/16)*100 ile elde edilir. Bu yöntemi kullanarak diğer herhangi bir en boy oranı için dolgu yüzdelerini hesaplayabilirsiniz.

Çözüm

CSS öğrenmeye yeni başlıyorsanız, umarım bu eğitim kenar boşluğu ve dolgu arasındaki farkı anlamanıza yardımcı olmuştur. Kısaltmaları ve uygun ölçü birimlerini kullanarak kenar boşluğunu ve dolguyu nasıl ayarlayacağınızı öğrenmeniz gerekir. Son bölümde iki tane gösterdim ilginç yollar Mizanpajlarda özelliklerin uygulanması ve ayrıca daha fazla bilgi edinmek için size kaynaklara bağlantılar verilmesi. CSS kenar boşluğu ve dolgusu hakkında başka ipuçlarınız varsa, lütfen bunları yorumlara gönderin.

Tanım

Öğe içeriğinin etrafındaki kenar boşluklarının değerini ayarlar. Kenar boşluğu, öğenin çerçevesinin iç kenarından içeriğini sınırlayan hayali dikdörtgene kadar olan mesafedir (Şekil 1).

padding özelliği, bir öğenin tüm kenarları için dolgu değerini aynı anda ayarlamanıza veya yalnızca belirli kenarlar için tanımlamanıza olanak tanır.

Sözdizimi

dolgu: [değer | yüzde] (1, 4) | miras almak

Değerler

Bir, iki, üç veya dört değeri boşlukla ayırarak kullanabilirsiniz. Etki, değer sayısına bağlıdır ve tabloda gösterilmektedir. 1.

Alanların boyutu piksel (px), yüzde (%) veya CSS için kabul edilebilir diğer birimlerle belirtilebilir. Miras değeri, ebeveynden miras alındığını gösterir. Kenar boşluğunu yüzde olarak belirtirken değer, öğenin üst öğesinin genişliğinden hesaplanır.

HTML5 CSS2.1 IE Cr Op Sa Fx

dolgu malzemesi

Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam Erat volutpat. Enim ve minimum düzeyde olmak üzere, her türlü sonuçtan elde edilebilecek en iyi egzersizi yapmaktır.

Sonuç bu örnekŞekil 2'de gösterilmiştir. 2.

Pirinç. 2. padding özelliğini uygulamak

Nesne Modeli

document.getElementById("elementID ").style.padding

Tarayıcılar

Internet Explorer'ın 7.0'a kadar olan sürümleri, devralma değerini desteklemez.

Önceki bölümde bunlardan bahsetmiştik CSS özellikleri, kenar boşluğu (alan) ve dolgu (girinti) gibi. Şimdi onlara daha detaylı bakacağız ve birbirlerinden nasıl farklı olduklarını ve hangi özelliklere sahip olduklarını ele alacağız.

Öğeler arasında boşlukları şu veya bu şekilde oluşturabilirsiniz, ancak dolgu içerikten bloğun kenarına kadar olan girintiyse, kenar boşluğu bir bloktan diğerine olan mesafe, yani bloklar arası boşluktur. Ekran görüntüsü net bir örnek gösteriyor:

Dolgu, içeriği blok sınırından ayırır ve kenar boşluğu, bloklar arasında boşluklar oluşturur

Gördüğünüz gibi CSS kenar boşlukları ve dolgusu birbirinden farklıdır, ancak bazen koda bakmadan mesafeyi ayarlamak için hangi özelliğin kullanıldığını belirlemek imkansızdır. Bu, içerik bloğunun çerçevesi veya arka planı eksik olduğunda meydana gelir.

Bir öğenin her iki tarafında CSS'de kenar boşluğunu veya dolguyu ayarlamak için aşağıdaki özellikler mevcuttur:

Dolgu malzemesi:

dolgulu üst: Anlam;
dolgu-sağ: Anlam;
dolgulu alt: Anlam;
sol dolgu: Anlam;

Alanlar:

kenar boşluğu üst: Anlam;
sağ kenar boşluğu: Anlam;
kenar boşluğu-alt: Anlam;
kenar boşluğu-sol: Anlam;

Değerler herhangi bir CSS biriminde belirtilebilir - px, em, % vb. Örnek: kenar boşluğu: 15px .

Ayrıca çok uygun bir şey var Kenar boşluğu ve dolgu CSS'sinin kısaltması. Bir öğenin dört tarafında da kenar boşlukları veya dolgu ayarlamanız gerekiyorsa, her bir taraf için özelliği ayrı ayrı yazmanıza gerek yoktur. Her şey daha basit hale getirildi: kenar boşluğu ve dolgu için aynı anda 1, 2, 3 veya 4 değer belirleyebilirsiniz. Değerlerin sayısı, ayarların nasıl dağıtılacağını belirler:

4 değer: dolgu, öğenin tüm kenarları için aşağıdaki sırayla ayarlanır: üst, sağ, alt, sol: dolgu: 2px 4px 5px 10px;
3 değer: dolgu ilk önce üst taraf için, ardından aynı anda sol ve sağ için ve ardından alt taraf için ayarlanır: dolgu: 3px 6px 9px;
2 değer: dolgu önce üst ve alt kenarlardan aynı anda, ardından sol ve sağ için aynı anda ayarlanır: dolgu: 6px 12px;
1 değer: öğenin tüm kenarları için eşit dolgu ayarlanır: dolgu: 3px;

Aynı kurallar CSS kenar boşluğu özelliği için de geçerlidir. Kenar boşluğu için bazen oldukça faydalı olabilecek negatif değerleri de (örneğin, -3px) kullanabileceğinizi lütfen unutmayın.

Kenar boşluğunu daralt

Durumu hayal edin: iki blok elemanıüst üste bulunur ve kenar boşlukları verilir. İçin üst blok Değer, marj: 60px olarak ayarlanmıştır ve alttaki değer, marj: 30px olarak ayarlanmıştır. İki öğenin iki sınır alanının basitçe birbirine değeceğini ve bunun sonucunda bloklar arasındaki boşluğun 90 piksele eşit olacağını varsaymak mantıklı olacaktır.

Ancak işler farklıdır. Aslında böyle bir durumda, iki bitişik eleman alanından boyutu en büyüğü seçildiğinde çökme adı verilen bir etki ortaya çıkar. Örneğimizde öğeler arasındaki son boşluk 60 piksel olacaktır.

Bloklar arasındaki mesafe değerlerden büyük olana eşittir

Kenar boşluğunu daraltma yalnızca öğelerin üst ve alt kenar boşlukları için işe yarar ve sağ ve sol kenarlardaki kenar boşlukları için geçerli değildir. Nihai boşluk değeri farklı durumlarda farklı şekilde hesaplanır:

Her iki marj değeri de pozitif olduğunda ortaya çıkan marj büyüklüğü büyük olan değere eşit olacaktır.
Değerlerden biri negatifse alanın boyutunu hesaplamak için değerlerin toplamını almanız gerekir. Örneğin, 20px ve -18px değerlerinde alan boyutu şuna eşit olacaktır:
20 + (-18) = 20 – 18 = 2 piksel.
Her iki değer de negatifse, bu sayıların modülleri karşılaştırılır ve modülü daha büyük olan (dolayısıyla negatif sayılardan daha küçük olan) sayı seçilir. Örnek: -6px ve -8px alanlarının değerlerini karşılaştırmanız gerekiyor. Karşılaştırılan sayıların modülleri sırasıyla 6 ve 8'dir. Bunu 6-8 takip ediyor. Ortaya çıkan alan boyutu -8 pikseldir.
Değerlerin belirtildiği durumda farklı birimler CSS'de bunlar bire indirilir, ardından karşılaştırılır ve büyük olan değer seçilir.
Alt öğelerin kenar boşluğu boyutu daha da ilginç bir şekilde belirlenir: Eğer bir çocuğun kenar boşluğu ebeveyninden daha büyükse öncelik ona verilir. Bu durumda ebeveynin üst ve alt kenar boşluklarının boyutları çocuk için belirlenenlerle aynı olacaktır. Bu durumda ebeveyn ile çocuk arasında mesafe kalmayacaktır.

Tanım

padding özelliği, bir öğenin tüm kenarları için dolgu değerini aynı anda ayarlamanıza veya yalnızca belirli kenarlar için tanımlamanıza olanak tanır.

Sözdizimi

dolgu: [değer | yüzde] (1, 4) | miras almak

Değerler

Bir, iki, üç veya dört değeri boşlukla ayırarak kullanabilirsiniz. Etki, değer sayısına bağlıdır ve tabloda gösterilmektedir. 1.

HTML5 CSS2.1 IE Cr Op Sa Fx

dolgu malzemesi

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 2.

Pirinç. 2. padding özelliğini uygulamak

Nesne Modeli

document.getElementById("elementID ").style.padding

Tarayıcılar

Internet Explorer'ın 7.0'a kadar olan sürümleri, devralma değerini desteklemez.

Hemen söyleyeyim; bu çok önemli bir ders. Bunu inceledikten sonra, sayfaya öğeler yerleştirebilecek, aralarında girintiler ayarlayabilecek, bunları ayrı bir blok içinde oluşturabilecek ve kenar boşluklarını ayarlayabileceksiniz.

dolgu malzemesi

Dolgu, bir öğenin kenarlığın iç kenarından içeriğe kadar olan dolgu miktarını ayarlayan bir özelliktir. İçerik düz metin, resim veya kendi alanlarına da sahip olabilen bir alt öğe olabilir.

Birimler piksel (px) veya yüzde (%) olabilir.

#engellemek (
dolgu: 12 piksel; /* blok sınırlarından içeriğe kadar girinti - her tarafta 12 piksel */
}

Yalnızca belirli bir tarafta bir alan belirtmek mümkündür:

dolgulu üst- üstte alanlar oluşturan özellik.
sağ dolgu- sağda alanlar oluşturan özellik.
dolgulu alt- altta alanlar oluşturan bir özellik.
sol dolgu- solda alanlar oluşturan özellik.

#engellemek (
alt dolgu: 25px; /* alt kenar boşluğu 25 piksel */
sol dolgu: 15px; /* sol kenar boşluğu 15 piksel */
}

Fark ettiğiniz gibi 2 veya 3 taraftaki alanları bu şekilde belirtirseniz uzun bir kod elde edersiniz. Bu amaç için padding özelliğinin bir kısaltması vardır. Sırayla 4 değerin tümünü gösterir - bir satırdaki her kenardan hareket, üstten başlayarak saat yönünde ilerler:

Dolgu: TopPadding RightPadding PaddingBottom PaddingLeft;

#engellemek (
dolgu: 25 piksel 10 piksel 15 piksel 6 piksel; /* üst 25 piksel, sağ 10 piksel, alt 15 piksel, sol 6 piksel */
}

marj

Kenar boşluğu özelliği, dolgunun aksine, öğelerin sınırları arasındaki girinti miktarını ayarlar.
Öğe bir çocuksa, dolgu, öğenin sınırından ebeveyn sınırının iç kenarına kadar olan boşluktur.
Bir öğenin ebeveyni yoksa girinti, özellik tarafından çevredeki öğelerin çerçevesinin kenarlarına ayarlanan boş alandır.

#engellemek (
kenar boşluğu: 4 piksel;
}

Girintiyi yalnızca belirli kenarlarda belirtmek için aşağıdaki özellikler mevcuttur:

kenar boşluğu- üstte girintiler oluşturan özellik.
kenar boşluğu-sağ- sağda girinti oluşturan özellik.
kenar boşluğu-alt- altta girintiler oluşturan bir özellik.
kenar boşluğu-sol- sol girintiyi oluşturan özellik.

Padding özelliği gibi, marj da farklı taraflara ait değerleri kısaltma yeteneğine sahiptir. Hareket üst alandan itibaren saat yönünde ilerler:

Kenar Boşluğu: TopMargin RightMargin Marjı Alt Kenar Boşluğu Sol;

#engellemek (
kenar boşluğu: 15 piksel 10 piksel 5 piksel 25 piksel; /* üst 15 piksel, sağ 10 piksel, alt 5 piksel, sol 25 piksel */
}

İlginiz için teşekkür ederiz!