yedi kelimelik bir bölümde başlık

Bu ilkeye bağlı kalmanın en basit nedeni, gelecekte sizin için veya gelecekte mizanpajınızla çalışacak biri için girinti bulmayı kolaylaştırmaktır. Bu, kolaylık hakkında konuştuğumuz zamandır.

Zayıf girinti yapısına sahip düzenler dinamik olarak işlendiğinde veya çoğaltıldığında gerçek sorunlar ortaya çıkabilir.

Bağımsız elemanlar için girintiler ayarlanamaz (BEM bloğu)

Bir bloğa girinti yapmanız gerekiyorsa... Önyargı olmaksızın, bu şu şekilde yapılır:

• Öğe aracılığıyla kalıtım (bu bloğu öğeden çıkarırsanız, herhangi bir girinti olmayacak ve başka bir yere yerleştirebilirsiniz).
• Bir sınıf eklemek (bir bloğu bir eleman yapabilirsiniz).
• Bir sarmalayıcı (yalnızca konumlandırmada rolü olan bir blok gibi).

Grubun son öğesi girintilidir (her zaman)

Son li için girinti sıfırdır. Ve girinti yapıldı bitişik elemanlar arasında ul ve img. İkinci prensipte söylenenler.

Başka bir örnek alalım:

.Blog-preview__item (margin-bottom: 20px;) tarafından belirlenen haberler arasındaki marjla ilgileniyoruz. Son kenar boşluğu sıfırlanır ve alt kenar boşluğu blog önizlemesi doldurularak yapılır. İkinci prensipte söylenenler.

Diğer sözde sınıflardan daha sık kullanmalısınız: last-child.

Öğe: değil (: last-child) (margin-bottom: 20px;) // veya // .item (// diğer stiller // margin-bottom: 20px; &: last-child (margin-bottom: 0;) ) // veya margin-top, buradaki ana fikir, kenar boşluğu yönünde değil, fazlalık yoksa // .item + .item (margin-top: 20px;) // veya // .item ( // diğer stiller // & + & (margin-top: 20px;))

İstisnalar

Elbette, bu ilkelere uymanın imkansız olduğu özel durumlar, önemsiz görevler ve nüanslar vardır, ancak aksi takdirde düzeni olabildiğince temiz hale getirmek için ideal girintiler için çabalamalısınız.

P. S. Yayını okumanızı tavsiye ederim

Merhaba blog sitesinin sevgili okuyucuları. Bugün çalışma konusuna devam etmek ve Html öğeleri için dolgu ve sınırlar ayarlamanıza izin veren stil kurallarını göz önünde bulundurmak istiyorum: kenarlık, kenar boşluğu ve dolgu.

Bundan önce, yazı tiplerini (), metni () kontrol eden ve modeli inceleyen oldukça basit özellikleri incelemeyi başardık.

Evet, tüm ayrıntılarda kullanım ilkelerini de göz önünde bulundurmayı başardık (birkaç makaleyi kapsayan). Şimdi belge oluşturmanın temelini oluşturan kurallara geçme zamanı (web sayfaları) ve blok model (Html \u200b\u200belemanlarının ilişkisi) ile başlayacağız.

Genel anlamda, modern hakkında zaten yazdım, ama bugün saf özellikler olacak. Konuyla ilgili önceki yayınları okumak isterseniz, hoş geldiniz.

CSS kutu modeli - dolgu, kenar boşluğu ve kenarlık

Üçüncüsü, faiz kullanılabilir. Onlar neyden sayılıyor? Şekline dönüştü konteynerin genişliğinden (yani, ana öğenin içerik alanından). Dahası, bu mantıksal olarak sadece kenar boşluğu-sağ ve sol için geçerli değildir, aynı zamanda kenar boşluğu için üst ve alt yüzdeler tam olarak kabın genişliğinden (yükseklik değil) hesaplanacaktır.

Boyutsal değerlerin belirlenmesi hakkında konuşurken, bu Marj olumsuz da olabilir... Şunlar. dış kenar boşluğu için pozitif bir değer belirlerken, bitişik elemanı belirtilen mesafe kadar hareket ettiririz ve eğer negatif bir değer belirtilirse, bitişik blok basitçe bu negatif marjı belirlediğimiz bloğa gider. Ve bu çok sık CSS'de kullanılır.

Pek çok durumda gerekli kenar boşluklarını ayarlamak için kullanılan kodun boyutunu azaltmanıza izin veren bileşik bir CSS Kenar Boşluğu kuralı olduğunu söylemeye gerek yok. İçindeki değerlerin sırası katı bir şekilde düzenlenmiştir (bir boşluk karakteriyle yazılırlar) ve örüntüyle eşleşmelidir:

Şunlar. numaralandırma üstten başlar ve devam eder saat yönünde dairenin sonuna kadar. Şunun gibi görünebilir:

Marj: 20px 10px 40px 30px;

Ve bu, tarayıcının bloğumuzun üstünde 20 piksel, 10'u sağa, 40'ı altta ve 30'u sola girinti yapması gerektiği anlamına gelir. bu giriş şuna eşdeğer olacaktır:

CSS kodundaki azalma çıplak gözle görülebilir. Ancak bu sınır değil. Bileşik kuralda yalnızca dört değil, üç, iki ve hatta yalnızca bir değer kullanmak tamamen kabul edilebilir. Bu, kodun boyutunu daha da azaltmaya yardımcı olacaktır. Ancak, değerlerin sayısını yalnızca belirli durumlarda azaltmak mümkün olacaktır:

1. Örneğin, sol ve sağ kenar boşlukları aynıysa, örneğin: margin: 20px 30px 40px 30px;

   İkincisi atlanabilir:

   Marj: 20px 30px 40px;

   Bu iki toplu kural girişi aynı şeyi yapar. Bu nedenle, Margin'de üç değer içeren bir kayıt görürseniz, dördüncü değerin değeri (sağda) ikincide (solda) görülebilir.

   Yukarıda ve aşağıda eşit marjlar olması durumunda, bu numara artık işe yaramayacaktır, çünkü mantıksal olarak, yalnızca kolektif kuralın kayıt yapısını azaltmak mümkündür. sonundan yinelenen değerleri kesmek (ve alt marjın değeri sondan bir önceki olacaktır).

2. Sol ve sağdaki dış kenar boşluklarının eşitliğine ek olarak, üstte ve altta değerlerinin eşitliği varsa: margin: 20px 30px 20px 30px;

   veya aynı olan (1. paragraf uyarınca):

   Marj: 20px 30px 20px;

   Böyle bir birleşik kural, sonuncusu atılarak yalnızca iki değerle yazılabilir; bu, birinciyle çakışır:

   Marj: 20px 30px; Bu durumda, ilk değer dikey kenar boşluklarını, ikincisi ise yatay kenar boşluklarını tanımlar.

3. Ve son olarak, prefabrik kuraldaki tüm değerler aynıysa: margin: 20px 20px 20px 20px;

   veya aynı olan (2. madde gereğince):

   Marj: 20px 20px;

   O zaman kullanabilirsin maksimum kısaltılmış kayıt türü (birinciyle eşleşen son değeri atarak):

   Marj: 20px; Bu, Html öğemizin her tarafında aynı marj anlamına gelecektir.

Kenar boşluklarından bahsetmişken, aşağıdaki gibi bir şemadan bahsetmeye değer "Margin-colloapse" veya başka bir deyişle, "marjların daralması". Özetle, bu fenomenin özü aşağıdaki gibidir.

Biri diğerinin altına yerleştirilmiş iki bloğumuz varsa (kenar boşluğu daralmaları yalnızca dikey olarak olabilir) ve her ikisinin de zıt kenar boşlukları varsa (örneğin, üst öğe için alt ve alt için üst kenar boşluğu), daha büyük bir Margin değeri daha küçük olanı emer.

Örneğin, üst blok şu şekilde ayarlanmışsa:

Marj: 20px 20px 200px 20px;

Ve sonuncusu için:

Marj: 100px 20px 20px 20px;

Daha sonra üst bloğun alt kenar boşluğu (200px), alttaki bloğun üst kenar boşluğunu emecek (100px ve 199px olsa bile hiçbir şey değişmeyecek) ve bu iki blok arasında ortaya çıkan dış kenar boşluğu yine 200px olacaktır. Şunlar. sadece daha büyük modulo Margin ve dikey olarak bitişik elemanın zıt değerini artırmaz.

Bu, yalnızca dikey ve yatay olarak çalışan aksaklıktır, zıt Marj boyutları basitçe birbirine eklenecektir. Ancak bu sadece aynı işaretli kenar boşlukları ile ilgilidir, ancak farklı işaretlere sahiplerse, sayıları basitçe toplanacak ve elde edilen değer ile bloklar birbirinden ayrılacaktır.

Örneğin, bu durumda:

Üst kenar boşluğu: 20px 20px -20px 20px; Alt kenar boşluğu: 10px 20px 20px 20px;

Bloklar arasında ortaya çıkan dolgu -10 piksel olacaktır, yani alttaki 10px, en üstteki Html öğesi ile çakışacaktır.

CSS'de Margin kuralını kullanmanın bir başka özelliği de, öngörülen değerin satır içi öğeler için dikey yok sayılır... Sorarak:

Marj: 20px;

Örneğin, bir satır içi öğe olan için, aslında yalnızca yatay dolgu görüyoruz ve dikey olarak herhangi bir değişiklik meydana gelmeyecektir.

Kendimden biraz ileride, Padding'in dikey olarak satır içi etiketler için işe yarayacağını, ancak artan dolgu diğer bitişik öğelere göre genel konumunu etkilemeyeceğini söyleyeceğim.

Bir blok etiketi (başlıklar, paragraflar) durumunda, dikey olarak artan Dolgu, bu öğeyi diğer bitişik bloklara göre hareket ettirecektir.

Sınır (Kenarlık) veya daha doğrusu genişliği, diğer bitişik blokları satır içi etiketinden dikey olarak hareket ettiremeyecektir. Çizgi öğeleri için hareket yalnızca tek yönde mümkündür - yatay olarak ve hepsi bu.

Dolgu ve kenarlık - dolgu ve kenarlıklar

Şimdi Dolgu kuralını kullanarak dolgu ayarına geçelim ve tam olarak hangi değerleri alabileceğini görelim:

Gördüğünüz gibi, burada Otomatik'ten söz edilmiyor ve bu CSS kuralı negatif değerlere izin vermiyor (bunlar yalnızca pozitif olabilir - sıfırdan yukarı). Şunlar. Dolgu, içeriği çerçevenin dışına itmez. Yapılabilecek maksimum şey, içeriği çerçeveye yaklaştırmaktır.

İçindeki yüzdeler, Margin ile aynı şekilde hesaplanır - öğemizi çevreleyen kabın genişliğine (ana öğenin içerik alanı) göre. Css'de Birleşik Dolgu Kuralı yukarıda tartışılan yasaların aynısı oluşturulur ve bunlara uyar:

Dolgu: 20px 10px 40px 30px;

Bu kuralda, dört tarafı yukarıdan başlayarak tarif ediyoruz. İçindeki bir şeyi (üçe, ikiye veya hatta bir değere) indirgemeniz gerekiyorsa, o zaman yukarıda açıklanan harici girintiler için azaltma ilkelerini kullanmanız gerekecektir; bu, iç girintiler için de aynı şekilde çalışacaktır.

Ve bugün dikkate almak istediğim son şey, kullanılarak ayarlanan çerçevedir. Kenarlık... Üç tür parametresi vardır:

1. Kenarlık genişliği - kenarlık kalınlığını ayarlar
2. Kenarlık rengi - rengini belirler
3. Kenarlık stili - kenarlık türü veya çizileceği çizgi türü

Bu CSS kurallarının üçünün de geçerli bir değerler kümesi vardır:

Çerçeve için çizgi genişliği ( Kenarlık genişliği) Em, Ex veya Px'deki sayılardan biri veya şu kelimelerle belirtilebilir:

1. İnce - ince çizgi;
2. Orta - orta (bu değer varsayılan olarak kullanılır);
3. Kalın - kalın.

Kenarlık rengi için bir değer olarak ( Sınır rengi), bunları ayarlamak için kabul edilen yöntemleri kullanabilirsiniz (onaltılık kod, sözcükler vb.):

Kenarlık rengi: kırmızı;

Varsayılan olarak, kenarlık rengi açıkça belirtilmezse, bu öğe içindeki yazı tipi için kullanılan renk kullanılacaktır.
CSS özelliği Kenarlık stili, sözcüklerdeki kenarlık türünü belirtmenize olanak tanır:

1. Yok - kenarlık yok (varsayılan)
2. Noktalı - çizgi noktalarla çizilir
3. Kesikli - noktalı çizgi
4. Düz - düz çizgi
5. Çift - çift çizgi
6. Oluk - preslenmiş çerçeve
7. Sırt - çıkıntılı
8. Giriş ve çıkış - gölge oyunu

Doğal olarak, herhangi bir bloğun dört tarafı olduğundan, hem genel kuralları hem de her iki taraf için ayrı kuralları kullanabilirsiniz:

Aynısı için de geçerli olacak prefabrik Sınır kuralı - Her iki taraf için aynı anda (Kenarlık) ve her iki taraf için ayrı ayrı (Kenarlık-üst, sol, alt ve sağ) yazılabilir. Değerlerin sırası önemli değildir:

Sınır: 1px sabit kırmızı;

Bir şey eksikse bunun yerine varsayılan kullanılacaktır.

Sana iyi şanslar! Yakında blog sitesi sayfalarında görüşmek üzere

adresine giderek daha fazla video izleyebilirsiniz

İlgini çekebilir

Yükseklik, genişlik ve taşma - bir blok düzeninde içerik alanını tanımlamak için CSS kuralları
Konum (mutlak, göreceli ve sabit) - HTML öğelerini CSS'de konumlandırma yolları (sol, sağ, üst ve alt kurallar) CSS aracılığıyla iç ve dış bağlantılar için farklı stil
CSS'de kaydırın ve temizleyin - blok düzeni araçları
CSS'de görüntüleme (engelle, yok, satır içi) - web sayfasındaki Html öğelerinin görüntülenme türünü ayarlayın

200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e

Kenar boşluğu ve dolgunun özellikleri

Açıklama

Öğenin her bir kenarından gelen dolgu miktarını ayarlar. Dolgu, geçerli öğenin kenarlığından üst öğesinin iç kenarlığına kadar olan alandır (Şekil 1).

Şekil: 1. Öğenin sol kenarından girintiyi artırın

Öğenin üst öğesi yoksa, pencerenin kendisinin de varsayılan olarak doldurulmuş olması koşuluyla, dolgu öğenin kenarından tarayıcı penceresinin kenarına olan mesafe olacaktır. Onlardan kurtulmak için seçici için marj değerini ayarlamalısınız sıfıra eşit.

Margin özelliği, bir elemanın tüm tarafları için girinti miktarını aynı anda ayarlamanıza veya bunu yalnızca belirli kenarlar için tanımlamanıza olanak tanır.

Sözdizimi

margin: [değer | ilgi | oto] (1,4) | miras almak

Değerler

Bir, iki, üç veya dört değerin boşlukla ayrılmasına izin verilir. Etki, değerlerin sayısına bağlıdır ve tabloda gösterilmiştir. bir.

Doldurma miktarı piksel (px), yüzde (%) veya CSS için kabul edilebilir diğer birimler cinsinden belirtilebilir. Değer pozitif veya negatif olabilir.

Otomatik Girintilerin boyutunun tarayıcı tarafından otomatik olarak hesaplanacağını belirtir. miras alır Üst öğenin değerini devralır.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Şekil: 2. Margin özelliğini uygulama

Nesne Modeli

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

Tarayıcılar

Tuhaf moddaki Internet Explorer 6, margin: 0 otomatik kuralı kullanılarak ortaya hizalamayı desteklemez. Ayrıca bu tarayıcıda, üst öğelerin içinde yuvalanmış yüzen öğeler için sol veya sağ dolgu değerini iki katına çıkarırken bir hata var. Ebeveyn tarafına bitişik olan dolgu iki katına çıkar. Sorun genellikle, kayan öğeye display: inline eklenerek çözülür.

Internet Explorer 7.0 veya üzeri, devralma değerini desteklemez.

Not

Dikey olarak yan yana yerleştirilmiş blok elemanlar için, çökme etkisi, girintiler toplanmadığında, birbiriyle birleştirildiğinde gözlenir. Daraltmanın kendisi, üst veya altta girintilerle iki veya daha fazla bloğa (biri diğerinin içine yerleştirilebilir) etki ederken, bitişik girintiler bir araya getirilir. Sol ve sağ girintiler için daraltma hiçbir zaman uygulanmaz.

Çökme çalışmıyor:

• daraltma tarafında dolgu özelliği ayarlanmış öğeler için.
• daraltma tarafında kenarlık ayarlanmış öğeler için;
• mutlak konumlandırmaya sahip elemanlarda, yani konumu mutlak olarak ayarlanmış olanlar;
• yüzen elemanlarda (onlar için float özelliği sola veya sağa ayarlanır);
• satır içi öğeler için;
• için .

Bugün HTML dolgusu arasındaki farkı anlamaya çalışacağız ( iç dolgu) ve CSS'de kenar boşluğu (dolgu). Ama önce sözdizimini bulalım. Bu özellikleri yazmanın birkaç yolu vardır: normal ve kısa:

CSS'de Dolgu ve Kenar Boşluğu

Söz konusu özellikler için olağan gösterimin anlaşılması daha kolaydır çünkü diğer tüm stil gösterimlerine benzer:

Düzenli giriş:

padding-top: 10px; sağ dolgu: 20px; alt dolgu: 10px; sol dolgu: 20px;

Öte yandan, kısa CSS gösterimi tüm bu özellikleri tek bir ortak özellikte birleştirir " dolgu malzemesi«.

Kısa giriş:

dolgu: 10px 20px 40px 10px;

Dolgu ve kenar boşluğunun dört değeri vardır: üst, sağ, alt ve sol. Yukarıda gösterilen steno, boşlukla ayrılmış dört değeri de belirtir. Dört değerden ilki üst dolgu, ardından sağ dolgu, alt dolgu ( alt HTML dolgusu) ve solda:

dolgu: ÜST SAĞ ALT SOL; (dolgu: sağ üst sol alt)

Sol ve sağ dolgu / kenar boşlukları aynıysa bu giriş üç değere kısaltılabilir. Örneğin, üst kenar boşluğu 30px, sol ve sağ 10px ve alt 40px ise, aşağıdaki gösterimi kullanabilirsiniz:

dolgu: 30px 10px 40px;

İki değere düşürün!

Üst ve alt dolgu / kenar boşlukları aynıysa ve sağ ve sol dolgu / kenar boşlukları aynıysa, yalnızca iki değer belirtilebilir. Bu örnekte, 10px'lik bir üst ve alt dolgumuz ve 20px'lik bir sol ve sağ dolgumuz var. CSS'miz şöyle görünecek:

dolgu: ÜST / ALT SAĞ / SOL; (dolgu: üst / alt sağ / sol) dolgu: 10px 20px;

Tek bir anlam!

HTML dolgusu ve kenar boşluğu için en son kısaltmamız yalnızca bir değer içerir. Bu giriş, tüm girinti ( üst, alt, sağ ve sol) aynı anlama sahiptir. Tüm tarafların 20px dolgusuna sahip olmasını isteseydik, CSS şöyle görünürdü:

Hangi kayıt formatı ne zaman kullanılır? Örneğin, yalnızca alt dolguyu bir öğeye ayarlamam gerekirse, özelliği yalnızca bir tarafa uygulamam gerektiğinden normal gösterimi kullanacağım: padding-bottom: 30px;

PADDING ve MARGIN ile nasıl çalışılır

Bu iki özellik arasında somut bir fark var. Dolgu, bir HTML öğesinin kabının içindeki boşluğu ayarlamak için kullanılır. Kenar boşluğu, öğelerin dış sınırının etrafındaki boşluğu ayarlamak için kullanılır.

Üzerine bir kışlık mont giydiğinizi hayal edin. Palto senin bir parçan, ama sana boya fırlatırsam, o ceketi giymemiş olmana göre daha geniş bir yüzeyi kaplayacaktı.

Dolguyu bir karton kutuda dolgu maddesi olarak da düşünebilirsiniz. Kutuyu Strafor ile doldururken, içindekileri kutunun kenarlarından uzak tutarsınız. CSS'de dolgu da aynı şeyi yapar.

Şimdi kenar boşluğunu çevrenizdeki görünmez bir güç alanı olarak düşünün. Güç alanı diğer şeyleri sizden korur. Palto ve boya örneğine dönecek olursam, size boya fırlatırsam ve güç alanından geçebilseydim, yine de sadece sizi ve paltonuzu kaplardı.

Site örneğinde PADDING ve MARGIN

Öğeleri içeren örnekleri kullanarak özelliklere bakalım. Bir paragrafla başlayacağız (etiket

), ardından bir arka plan rengi ekleyin ve her bir tarafa 30 piksellik bir dolgu ekleyin.

Sol altta, bunun etrafında 30 piksellik bir dolgu olan bir paragraf olduğunu görebilirsiniz. Sağdaki resimde, bu öğe için HTML dolgusunun nerede başladığını / bittiğini göstermek için Google Chrome araçlarını kullandım. Aşağıdaki görüntüdeki yeşil renk, kabın etrafındaki dolgudur. Koyu mavi arka plan rengi iç alanı doldurur:

Şimdi paragrafa bir kenar boşluğu ekleyelim. 30px üst ve alt dolgu ve 20px sol ve sağ dolgu ekleyeceğim. Soldaki aşağıdaki resim, bu paragrafın kenar boşluğundan nasıl değiştiğini göstermektedir. Görüntünün gerçek genişliği küçüldü çünkü kenar boşluğu diğer HTML öğesini sınırdan uzağa itiyor. Sağ tarafta, turuncunun öğenin etrafındaki kenar boşluğu olduğunu görebilirsiniz. kenar boşluğu her zaman dolgunun dışındadır ve koyu mavi arka plan kenar boşluğu alanına uzanmaz.