CSS'de kenar boşluğu vs dolgu ne zaman kullanılır? PADDING ve MARGIN özellikleri ve bunların nasıl kullanılacağı

Merhaba, blog sitesinin sevgili okuyucuları. Bugün çalışma konusuna devam etmek ve Html öğeleri için girintiler ve kenarlıklar belirlemenize izin veren stil kurallarını ele almak istiyorum: kenarlık, kenar boşluğu ve dolgu.

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

Evet, kullanım ilkelerini de tüm detaylarıyla ele almayı başardık (birkaç makaleye yayılmış). Şimdi, belgelerin (web sayfaları) oluşturulması için temel oluşturan kurallara geçme zamanı ve blok modeliyle (Html ​​öğelerinin ilişkisi) başlayacağız.

Genel anlamda, zaten ve modern hakkında yazdım, ama bugün saf ayrıntılar olacak. Konuyla ilgili önceki yayınları okumak isterseniz, bekliyoruz.

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

Üçüncüsü, yüzdeler kullanılabilir. Neyden sayılırlar? Şekline dönüştü konteyner genişliğinden(yani, ana öğenin içerik alanından). Ayrıca, bu sadece mantıklı olacak şekilde sağ ve sol kenar boşluğu için değil, üst ve alt kenar boşluğu için de yüzdeler kabın genişliğinden (yükseklikten değil) hesaplanacaktır.

Boyutsal değerlerin ayarlanmasından bahsederken, Marjın olumsuz da olabilir. Şunlar. dış girinti için pozitif bir değer ayarlarken, bitişik elemanı belirtilen mesafeye taşırız ve negatif bir değer belirtilirse, bitişik blok basitçe bu negatif girintiyi ayarladığımıza gider. Ve bu, CSS'de çok sık kullanılır.

Pek çok durumda gerekli marjları ayarlamak için kullanılan kodun boyutunu küçültmenize izin veren önceden hazırlanmış bir CSS Marj kuralı olduğunu söylemeye gerek yok. İçindeki değerlerin sırası kesinlikle düzenlenir (boşluk karakteriyle yazılırlar) ve kalıpla eşleşmelidir:

Şunlar. numaralandırma yukarıdan (üstten) başlar ve devam eder saat yönünde sağ girintili (sağ) dairenin sonuna kadar. Bunun gibi görünebilir:

Kenar Boşluğu:20px 10px 40px 30px;

Bu, tarayıcının bloğumuzun 20 piksel yukarısına, 10 piksel sağa, 40 piksel alta ve 30 piksel sola girinti yapması gerektiği anlamına gelir. bu giriş şuna eşdeğer olacaktır:

CSS kodunun kısaltılması çıplak gözle görülebilir. Ama bu sınır değil. Önceden hazırlanmış bir kuralda sadece dört değil, aynı zamanda üç, iki ve hatta sadece bir değer kullanmak tamamen kabul edilebilir. Bu da kodun boyutunu azaltmaya yardımcı olacaktır. Ancak, yalnızca belirli durumlarda değer sayısını azaltmak mümkün olacaktır:

1. Sol ve sağ kenar boşlukları aynıysa, örneğin: kenar boşluğu:20px 30px 40px 30px;

   Bu sonuncusu atlanabilir:

   Kenar Boşluğu:20px 30px 40px;

   Bu iki toplama kuralı girişi aynı şeyi yapar. Bu nedenle, Margin'de üç değere sahip bir giriş görürseniz, dördüncü (sağda) değeri ikincide (solda) görülebilir.

   Yukarıdan ve aşağıdan eşit girintiler olması durumunda, böyle bir hile artık çalışmayacaktır, çünkü mantıksal olarak, önceden hazırlanmış kural girişinin yapısını azaltmak mümkündür, sadece sonundan yinelenen değerleri kesmek(ve alt girintinin değeri sondan bir önceki olacaktır).

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

   veya aynı olan (1. madde sayesinde):

   Kenar Boşluğu:20px 30px 20px;

   Böyle bir önceden hazırlanmış kuralın, ilkiyle eşleşen sonuncusu atılarak yalnızca iki değerle yazılabileceği:

   Kenar Boşluğu:20 piksel 30 piksel; Bu durumda, ilk değer dikey kenar boşluklarını, ikincisi ise yatay kenar boşluklarını tanımlar.

3. Ve son olarak, eğer prekast kuralındaki tüm değerler aynı ise: margin:20px 20px 20px 20px;

   veya, aynı olan (2. madde sayesinde):

   Kenar Boşluğu:20 piksel 20 piksel;

   Bu kullanılabilir en kısa kayıt türü(birinciyle eşleşen son değeri atarak):

   Kenar Boşluğu:20 piksel; Html elementimizin her tarafında aynı dış girinti ne anlama gelecek.

Marjlardan bahsetmişken, böyle bir şemadan bahsetmeye değer. "marj-daralma" veya başka bir deyişle, “marj çöküşü”. Özetle, bu fenomenin özü aşağıdaki gibidir.

Birini diğerinin altında bulunan iki blok varsa (kenar boşlukları sadece dikey olarak çökebilir) ve her ikisinin de zıt kenar boşlukları vardır (örneğin, üst eleman için alt ve alt kenar için üst kenar boşluğu), daha büyük bir marj değeri daha küçük bir bir.

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

Kenar Boşluğu:20px 20px 200px 20px;

Ve alt için:

Kenar Boşluğu:100px 20px 20px 20px;

Daha sonra üst bloğun alt kenar boşluğu (200 piksel) alttakinin üst kenar boşluğunu emer (100 piksel ve 199 piksele eşit olsa bile hiçbir şey değişmez) ve bu iki blok arasındaki sonuçtaki dış girinti yine 200 piksel olacaktır. Şunlar. Sadece büyük olan dikkate alınır. modulo Margin ve dikey olarak komşu elemanın zıt değeri ile hiçbir şekilde toplanmaz.

Bu, yalnızca dikey olarak çalışan bir hiledir ve yatay olarak zıt Marj boyutları birbirine eklenecektir. Ancak bu, yalnızca aynı işarete sahip kenar boşlukları için geçerlidir, ancak farklı işaretlere sahiplerse, sayıları basitçe toplanır ve bloklar elde edilen değerle birbirinden ayrılı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 10 piksel üstteki Html öğesinin üzerinden geçecektir.

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

Kenar Boşluğu:20 piksel;

Örneğin, bir satır içi öğe olan için, aslında yalnızca yatay dolguyu göreceğiz ve hiçbir dikey değişiklik olmayacak.

Biraz ileriye baktığımda, satır içi etiketler için dikey olarak Doldurmanın işe yarayacağını söyleyeceğim, ancak artan girinti, diğer komşu öğelere göre genel konumunu etkilemeyecektir.

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

Eh, çerçeve (Sınır) veya daha doğrusu genişliği, diğer bitişik blokları satır içi etiketten dikey olarak hareket ettiremez. Satır içi elemanlar için hareket yalnızca bir yönde mümkündür - yatay olarak ve hepsi bu.

Dolgu ve kenarlık - dolgu ve kenarlıklar

Şimdi Padding kuralını kullanarak padding ayarına geçelim ve hangi değerleri alabileceğini görelim:

Gördüğünüz gibi, burada Auto'dan söz edilmiyor ve ayrıca bu CSS kuralı negatif değerlere izin vermiyor (sadece pozitif olabilirler - sıfırdan ve üstünden). Şunlar. Doldurma yardımı ile içerik çerçevenin dışına itilemez. Yapılabilecek maksimum, içeriği çerçeveye yaklaştırmaktır.

İçindeki yüzdeler, öğemizin içine alındığı kabın genişliğine (ana öğenin içerik alanı) göre, Kenar Boşluğu'ndakiyle aynı şekilde hesaplanır. Css Prefabrik Dolgu Kuralı oluşturulur ve yukarıda tartışıldığı gibi aynı yasalara uyar:

Dolgu:20px 10px 40px 30px;

Bu kuralda yukarıdan başlayarak dört tarafı da tanımlıyoruz. İçinde bir şeyi azaltmanız gerekiyorsa (üç, iki veya hatta bir değer), dahili olanlar için tam olarak aynı başarı ile çalışacak olan harici girintiler için yukarıda açıklanan azaltma ilkelerini kullanmanız gerekecektir.

Ve bugün dikkate almak istediğim son şey, kullanılarak ayarlanan çerçevedir. Sınır. Üç tür parametreye sahiptirler:

1. Border-width - sınırın genişliğini ayarlar
2. Border-color - rengini ayarlar
3. Kenarlık stili - çizileceği çerçeve türü veya çizgi türü

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

Kenarlık için çizgi genişliği ( sınır genişliği) hem Em, Ex veya Px'deki sayıların yardımıyla hem de ş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ı belirtmek için kabul edilen yöntemleri kullanabilirsiniz (onaltılık kod, kelimeler, vb.):

kenarlık rengi:kırmızı;

Varsayılan olarak, kenarlığın rengi açıkça ayarlanmadıysa, verilen öğenin içindeki yazı tipi için kullanılan kullanılacaktır.
Kenarlık stili CSS özelliği, kenarlık türünü sözcüklerle ayarlamanıza olanak tanır:

1. Yok - kenarlık yok (varsayılan)
2. Noktalı - çizgi noktalarla çizilir
3. Kesikli - noktalı
4. Düz - düz çizgi
5. Çift - çift hat
6. Oluk - girintili çerçeve
7. Sırt - şişkin
8. Ek ve başlangıç ​​- gölge oyunları

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

Aynı şey için geçerli olacak Prekast Kural Kenarlığı- Aynı anda hem tüm taraflar için (Sınır) hem de her bir kenar için ayrı ayrı (Sınır-üst, sol, alt ve sağ) yazılabilir. Değerlerin sırası önemli değildir:

Kenarlık:1px düz kırmızı;

Bir şey atlanırsa, bunun yerine varsayılan değer kullanılacaktır.

Sana iyi şanslar! Yakında blog sayfaları sitesinde görüşürüz

adresine giderek daha fazla video izleyebilirsiniz.

ilginizi çekebilir

Yükseklik, genişlik ve taşma - İçerik alanını blok düzeninde tanımlamak için CSS kuralları
Konum (mutlak, göreli ve sabit) - HTML öğelerini CSS'de konumlandırmanın yolları (sol, sağ, üst ve alt kurallar) CSS aracılığıyla dahili ve harici bağlantılar için farklı stiller
CSS'de yüzdür ve temizle - yerleşim araçlarını engelle
CSS'de görüntüle (blok, yok, satır içi) - bir web sayfasındaki Html öğelerinin görüntülenme türünü ayarlayın

Bir önceki bölümde, margin (field) ve padding (indent) gibi CSS özelliklerinden bahsetmiştik. Şimdi onlar üzerinde daha ayrıntılı olarak duracağız ve birbirlerinden nasıl farklı olduklarını ve hangi özelliklere sahip olduklarını ele alacağız.

Öğeler arasında her iki şekilde de boşluklar oluşturabilirsiniz, ancak dolgu, içerikten bloğun kenarına kadar olan girintiyse, o zaman kenar boşluğu bir bloktan diğerine olan mesafedir, bloklar arası boşluktur. Ekran görüntüsü iyi bir örnek gösterir:

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

Gördüğünüz gibi, CSS kenar boşlukları ve dolgu 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ğu için çerçeve veya arka plan olmadığında gerçekleşir.

Bir öğenin her iki tarafından CSS'de kenar boşluğu veya dolgu ayarlamak için aşağıdaki özellikler vardır:

girintiler:

• dolgu üst: anlam;
• dolgu-sağ: anlam;
• dolgu-alt: anlam;
• dolgu-sol: anlam;

Alanlar:

• kenar boşluğu: anlam;
• kenar-sağ: anlam;
• kenar boşluğu-alt: anlam;
• sol kenar boşluğu: anlam;

Değerler herhangi bir CSS biriminde belirtilebilir - px, em, %, vb. Örnek: margin-top: 15px .

Bir de çok kullanışlı bir şey var. Kenar boşluğu ve dolgu için CSS kısayolu. Bir elemanın dört kenarı için de kenar boşlukları veya dolgu ayarlamanız gerekiyorsa, her bir kenar için ayrı ayrı özellik yazmanız gerekmez. Her şey daha basit hale getirildi: kenar boşluğu ve dolgu için aynı anda 1, 2, 3 veya 4 değer belirtebilirsiniz. Ayarların nasıl dağıtıldığı, değerlerin sayısına bağlıdır:

• 4 değer: dolgu, öğenin tüm kenarları için şu sırayla ayarlanır: üst, sağ, alt, sol: dolgu: 2px 4px 5px 10px;
• 3 değer: dolgu önce üst taraf için, ardından hem sol hem de 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 ayarlanır ve ardından - sol ve sağ taraflar için aynı anda: dolgu: 6px 12px;
• 1 değer: öğenin tüm kenarları için aynı dolguyu ayarlayın: padding: 3px;

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

çöken marj

Durumu hayal edin: iki blok elemanı birbirinin üzerindedir ve onlara kenar boşlukları verilir. Üst blok kenar boşluğu: 60px ve alt blok kenar boşluğu: 30px olarak ayarlanmıştır. İki elementin iki sınırlı marjının basitçe dokunacağını ve sonuç olarak bloklar arasındaki boşluğun 90 piksel olacağını varsaymak mantıklı olacaktır.

Ancak, işler farklıdır. Aslında, böyle bir durumda, en büyük boyut iki bitişik eleman alanından seçildiğinde, çöküş olarak adlandırılan bir etki ortaya çıkar. Örneğimizde, elemanlar arasında ortaya çıkan boşluk 60 piksel olacaktır.

Daraltılmış kenar boşlukları, öğelerin yalnızca üst ve alt kenar boşlukları için çalışır ve sağ ve sol kenar boşluklarına uygulanmaz. Boşluğun nihai değeri, farklı durumlarda farklı şekillerde hesaplanır:

• Her iki kenar boşluğu değeri de pozitif olduğunda, son kenar boşluğu boyutu daha büyük değer olacaktır.
• Değerlerden biri negatifse, alan boyutunu hesaplamak için değerlerin toplamı alınmalıdır. Örneğin, 20px ve -18px değerleri ile alan boyutu şöyle olacaktır:
  20 + (-18) = 20 - 18 = 2 piksel.
• Her iki değer de negatifse, bu sayıların modülü karşılaştırılır ve daha büyük modulo ile sayı seçilir (dolayısıyla negatif sayılardan daha küçük). Örnek: -6px ve -8px alanlarının değerlerini karşılaştırmak istiyorsunuz. Karşılaştırılan sayıların modülleri sırasıyla 6 ve 8'dir. Bunu 6 -8 takip eder. Son alan boyutu -8 pikseldir.
• Değerler farklı CSS birimlerinde belirtildiğinde, bunlar bire indirgenir, daha sonra karşılaştırılır ve daha büyük değer seçilir.
• Çocuk elementleri için marjın büyüklüğü daha da ilginçtir: Çocuk ebeveynden daha büyük bir marjı varsa, öncelik verilir. Bu durumda, ebeveynin üst ve alt kenar boşluklarının boyutları, çocuk için ayarlananla aynı olacaktır. Bu durumda, ebeveyn ile çocuk arasında bir mesafe olmayacaktır.

Forumlardaki Shastaya, sorunun hala ortaya çıktığı gerçeğiyle karşılaştı, ne yapar? dolgu malzemesi, Ve ne kenar boşluğu ve aralarındaki farklar nelerdir. Bu yüzden hatırlatmaya karar verdim. Öyleyse, anlaşılmaz ifadelere başvurmadan, görevi belirleyelim ve her şeyin netleşeceği bir örneği analiz edelim.

Bir görev: Sayfada kırmızı blok lazım(200x200 piksel), hangi tarayıcının kenarlarından uzaklaşır sırasıyla 40 ve 70 piksel üstte ve solda ve soldan ve üstten girintili metin 40 piksel ile.

Çözüm: resme ve koda bakın. Kırmızı bloğumuz 200 x 200 pikseli geçmemeli ve tarayıcının (veya diğer içerik bloklarının) kenarlarından doldurulmalıdır. Aslında bu girintileri kenar boşluğundan yapıyoruz. Dolgu yaparsak, dolgu kırmızı bloğumuzun içinde gerçekleşir ve dolgu, bloğun kendisinin arka planıyla (yani kırmızı) elde edilir.

Kullanılan özelliklere ek olarak (6-9. satırlar), ayrıca sağ kenar boşluğu, sağ dolgu, kenar boşluğu-alt, dolgu-alt özellikleri de vardır - bunlar sırasıyla sağdaki ve alttaki girintiler içindir. Tüm bu özelliklerin değerleri piksel (px), yüzde (%) veya em birimlerinde olabilir.

Temel olarak, bu kadar. Ancak, onlarla çalışmanın başka özellikleri de var.

Kenar boşluğu ve dolgu özellikleri

Dolgu kullanırken, dolgunun boyutları bloğun yüksekliğinden ve genişliğinden çıkarılmalıdır, aksi takdirde bloğun boyutu dolgunun boyutu kadar artacaktır.

Bazı bloklar için otomatik değerlerle sol kenar boşluğu ve sağ kenar boşluğu ayarlarsanız, o zaman blok sabit bir genişliğe sahipse (örneğin 400 piksel) ve kayan CSS özelliği yoksa, bu blok ortasına hizalanır. bulunduğu elementtir. Aslında, merkez hizalamalı kauçuk olmayan yerleşim için bu hizalama yöntemi genellikle kullanılır. IE 5.5 ve önceki sürümler auto değerini desteklemese de, yine de onu her zaman kullanmanıza engel değil=).

Tablolarda dolgu ve kenar boşluğu kullanılması önerilmez, çünkü etki farklı tarayıcılarda tahmin edilemez.

Ve söylemek istediğim son şey. margin: 10px 0 5px 20px; gibi stenografi gönderi yapılarını kullanmayı unutmayın. Girinti sıfırsa, parametreleri belirtmeden basitçe sıfır koyabilirsiniz. Parametrelerden hangisinin hangi sınıra ait olduğunu hatırlamak çok kolaydır - blok için girintiler saat yönünde ilerler: ilk sayı üstte, ikincisi sağda, üçüncüsü altta, dördüncüsü altta. ayrıldı.

Aslında bugün sana söylemek istediğim tek şey buydu. Herkese mutlu hafta sonları!

Tanım

Bir öğenin her kenarından dolgu miktarını ayarlar. Doldurma, geçerli öğenin sınırından ana öğesinin iç sınırına kadar olan boşluktur (Şekil 1).

Pirinç. 1. Öğenin sol kenarından girinti

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

Marj özelliği, elemanın tüm tarafları için bir kerede girintiye miktarını ayarlamanıza veya yalnızca belirtilen taraflar için tanımlamanıza olanak tanır.

Sözdizimi

marj: [değer | faiz | otomatik] (1,4) | miras

değerler

Bir, iki, üç veya dört değerin aralarında boşluk bırakılarak kullanılmasına izin verilir. Etki, değerlerin sayısına bağlıdır ve Tabloda verilmiştir. bir.

Doldurma miktarı piksel (px), yüzde (%) veya CSS için izin verilen diğer birimlerde belirtilebilir. Değer pozitif veya negatif olabilir.

Otomatik Doldurma boyutunun tarayıcı tarafından otomatik olarak hesaplanacağını belirtir. inherit Ebeveynin değerini devralır.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Pirinç. 2. Marj özelliğinin uygulanması

Nesne Modeli

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

tarayıcılar

İlginç modda Internet Explorer 6, bir kutunun kenar boşluğunu kullanarak ortalamasını desteklemez: 0 auto . Ayrıca bu tarayıcıda, ana öğelerde yuvalanmış kayan öğeler için sol veya sağ dolgu değerini iki katına çıkaran bir hata var. Ebeveynin yanına bitişik olan dolgu iki katına çıkar. Sorun genellikle kayan öğeye display: inline eklenerek çözülür.

Internet Explorer 7.0 sürümüne kadar devralma değerini desteklemez.

Not

Dikey olarak yan yana bulunan blok elemanları, girintiler toplanmadığında, birbirleriyle birleştirildiğinde çöken bir etkiye sahiptir. Çöküşün kendisi, yukarıdan veya alttan girintilerle iki veya daha fazla bloğu (biri diğerinin içine yerleştirilebilir) etkilerken, bitişik girintiler bir olarak birleştirilir. Sol ve sağ dolgu asla çökmez.

Daralt çalışmıyor:

• daraltma tarafında dolgu seti olan öğeler için.
• daraltma tarafında kenarlığı olan öğeler için;
• mutlak konumlandırmaya sahip elemanlarda, yani konumu mutlak olarak ayarlanmış olanlar;
• kayan elemanlarda (onlar için float özelliği left veya right olarak ayarlanır);
• satır içi elemanlar için;
• için .

Kaynak: kenar boşluğu veya dolgu?
Philip Sporrer.
Tercüme: vl49.

Biçimlendirme amacıyla kenar boşluklarını ve dolguyu ne zaman kullanmak daha iyidir ve bunun önemi var mı?

Uygun cevaplar bulmak için çok uzun süre uğraştım. Ve ancak çeşitli yan etkilerle birlikte çok fazla korkunç, okunaksız CSS kodu yazdıktan sonra, yukarıda listelenen konularla ilgili temel demirklad kurallarını bulduğumu güvenle söyleyebilirim.

Örneklemek için, 2017'deki her UI geliştiricisinin muhtemelen aşina olduğu tipik bir duruma bakalım. En basit kart şablonuna sahibiz.

Bu örnekte, iki tür aralık ayırt edilebilir:

Burada bağlantı kurarken birbiriyle bağlantılı olmaması gereken iki farklı kavramla karşı karşıya olduğumuzu anlamak çok önemlidir. Yani, kartlar ve kapları arasındaki mesafeyi değiştirmem gerekiyorsa, örneğin 24 piksele kadar, bu, kartların kendileri arasındaki boşluğu hiçbir şekilde etkilememelidir.

CSS ile bir örnek uygulama?

Kenar boşluklarını ve dolguları kullanarak böyle bir şablon oluşturmanın binlerce yolu var, ancak marj ve dolgu özelliklerinin doğru kullanımını gösteren birine dikkatinizi sunmak istiyorum. Üstelik bu yöntem daha sonra başka kartlar eklemenize de olanak tanır.

konteyner(
dolgu: 16 piksel
}
.kart + .kart(
kenar boşluğu: 0 0 0 8px;
}

Sadece 2 seçici ve 2 kural.

Artı işaretinin işlevi nedir?

Sembol + temsil eder bitişik seçici. Yalnızca bu seçiciden önce belirtilen öğeden hemen sonraki öğeye işaret eder.

Yukarıdaki resimden de görebileceğiniz gibi, bizim durumumuzda bu seçici seçecektir. her karttan önce diğer kartlar. Böylece bitişik seçiciyle, ilki hariç her kart için sol marjı ayarlayabiliriz.

Bu, ihtiyacımız olan herhangi bir sayıda kartı ekleme yeteneğine sahip olduğumuz anlamına gelir, aralarındaki mesafe her zaman sekiz piksel olacaktır.

Kartların yanına karttan başka bir şey yerleştirmemiz gerekene kadar her şey yolunda gidiyor. Peki, bir düğme diyelim "Kart ekle" ("Kart ekle"):

Zaten sahip olduğumuz CSS snippet'ine dayanarak, muhtemelen bir kart olmadığı için A.Card sınıfını temsil eden yeni öğeyi vermezdik. Nasıl olunur? .card sınıfıyla aynı kuralı bir margin özelliğiyle içeren .add-card ek bir sınıf adı oluşturmaya değer mi? Hayır, daha iyi bir çözüm var.

Lobotomize edilmiş baykuş *+* .

Ve neye benziyor. Komik çağrışımına rağmen, bu yöntem harika çalışıyor ve öğrendiğimden beri sürekli kullanıyorum. Peki, tüm bunlar ne için? İlgili CSS koduna bir göz atın:

konteyner(
dolgu: 16 piksel
}
/* Peki, lobotomize edilmiş baykuşu tanıdınız mı? */
.container > * + * (
kenar boşluğu: 0 0 0 8px;
}

Muhtemelen hatırladığınız gibi, önceki seçici, başka bir karttan önce gelen herhangi bir karta uygulandı. Şimdi onun yardımıyla biçimlendirebiliriz her öğeden hemen önce başka bir öğe gelir, tabii ki düğme dahil.

Sonunda.

Burada sunulan materyalin, kapsayıcı içinde yer alan içeriği ve ne zaman kenar boşluklarını kullanmak için dolgu kullanacağınızı anlamanıza yardımcı olduğunu içtenlikle umuyorum.

Sonuç olarak, yukarıdaki örnekleri gösteren bir kalem projesini ve kendi deneyimimle doğrulanan iki kuralı gösteren bir kalem projesini sunmak istiyorum. Yani, kullanıyoruz:

dolgu malzemesi- kap ve içeriği arasındaki boşluklar için.

kenar boşluğu- kap içindeki elemanlar arasındaki boşluklar için.