CSS dolgusunun gücü, dolgunun bir öğenin ortasına, sınırları arasında yerleştirilmesini ifade eder.

CSS dolgu sözdizimi

dolgu: sağ üst sol alt;

• üst - elemanın üst sınırından erişim;
• sağ - öğenin sağ sınırından erişim;
• alt - elemanın alt sınırından erişim;
• sol - öğenin sol kenarından erişim;

Değerler çoğunlukla piksel cinsinden belirtilir. Yüzlerce ve diğer geçerli CSS birimlerinin görünümünün özelleştirilmesine de izin verilir.

Not 1
Önemli bir değere sahip olmamasına izin verilir. Değer sayısına bağlı olarak değerler değişecektir:

• 3 değer belirtilirse, ilk değer hayvanın erişimini ayarlar, diğeri - aynı anda solda ve sağda ve üçüncüsü - altta
• 2 değer belirtilirse, ilk değer girişi yukarı ve aşağı ayarlar, diğeri ise sol ve sağ elini birlikte ayarlar
• 1 değer belirtilirse giriş tüm taraflar için aynı girişe ayarlanır. Örneğin:

dolgu: 10 piksel 10 piksel 10 piksel 10 piksel; Daha kompakt bir şekilde belirtebilirsiniz: dolgu: 10 piksel;

Not 2
Yönetim sayfasında güç CSS'si kenar boşluğu, negatif dolgu değerleri kabul edilmez.

Ayrıca dolgunun 4 ek CSS gücü vardır. Derileri doğrudan şarkı söylemek anlamına gelir.

• dolgu-sol - öğenin sol kenarından giriş;
• padding-right - öğenin sağ kenarından giriş;
• padding-top - elemanın üst kenarından erişim;
• padding-bottom - öğenin sol kenarından giriş;

Örneğin

dolgu: 3 piksel 5 piksel 7 piksel 10 piksel; Veya bir raporda şunu sorabilirsiniz: sol dolgu: 10 piksel; sağ dolgu: 5px; dolgu üst: 3px; dolgu-alt: 7 piksel;

Elemanın ortasında farklı çıkıntılara sahip uçlar

Örnek 1. Etiketin ortasına metin girme

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 2. Отступ объекта внутри объекта

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле слева от текста

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить поля только для указанных сторон.

Краткая информация

Синтаксис

padding: [<размер> | <проценты>] {1, 4}

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Величину полей можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div { background: #e4efc7; padding: {{ playgroundValue }}px ; }

Пример

İletkenlik ölçümü yumuşak bir şekilde iletir elektronik yöntem Metilkarbilin ortasından nüfuz etmesinden bağımsız olarak uzaklaştırılır.

Şekil 2'de popoya verilen okumaların sonucu. 2.

Küçük 2. Zastosuvannya vlastivosti dolgusu

nesne modeli

nesne.style.padding

Şartname

Cilt spesifikasyonu inflamasyonun çeşitli aşamalarından geçer.

• Öneri - Spesifikasyon W3C tarafından övülmektedir ve standart olarak tavsiye edilmektedir.
• Aday Tavsiyesi ( olası öneri) - standardı temsil eden grup, hedeflerine ulaştığından memnundur ancak standardın uygulanmasında uzmanlardan oluşan bir ekibin yardımına ihtiyaç duyar.
• Önerilen Öneri Öneri yapıldı) - bu aşamada, artık katılaşma için W3C Tavsiyesine sunulan bir belge.
• Çalışma Taslağı - tartışıldıktan ve bütünlüğü sağlamak için değişiklikler yapıldıktan sonra taslağın daha olgun bir versiyonu.
• Editörün taslağı ( Editoryal Çernetka) - projenin editörleri tarafından değişiklikler yapıldıktan sonra standardın siyah versiyonu.
• Taslak ( Ördek spesifikasyonu) - standardın ilk siyah versiyonu.

tarayıcılar

tarayıcılar

Tarayıcı tablosu aynı değerlere sahip olacaktır.

Demek istediğim, bu çok önemli bir ders. Bu değişiklikten sonra yan taraftaki elemanları genişletebilir, aralarına girişler ayarlayabilir, bunları belirli bir bloğun ortasında oluşturabilir ve alanları ayarlayabilirsiniz.

dolgu malzemesi

Dolgu, kordonun iç kenarından yerine kadar elemanda bir takım alanların kurulmasına yarayan güçtür. Bunun yerine, kendi alanlarını da oluşturabilen bir birincil metin, bir resim veya bir alt öğe olabilir.

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

#engellemek (
dolgu: 12 piksel; / * Blok kordonlarından mekana giriş - her taraftan 12 piksel olacaktır * /
}

Sahaya yalnızca tek taraftan girmek mümkündür:

dolgulu üst- canavar için alanlar yaratan güç.
sağ dolgu- Sağ elle alanları yaratan güç.
dolgulu alt- aşağıdaki alanları yaratan güç.
sol dolgu- kötülük alanlarını yaratan güç.

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

Bu şekilde 2 veya 3 taraftaki alanları belirtmeniz gerektiğini belirttiyseniz farklı bir kod göreceksiniz. Bunun için güç dolgusu kaydını kısaltmak gerekir. 4 değerin tümü bunun üzerinden gösterilir - bir sıradaki cilt kenarından, bir yıllık sıranın arkasına geçerek, üstten başlayarak:

Dolgu: TopIndent RightIdent IndentBottom IndentLeft;

#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ğunun gücü, dolgunun aksine kenar öğeleri arasındaki kenar boşluğu miktarını belirler.
Eleman bir çocuksa giriş, elemanın kordonundan babanın kordonunun iç kenarına kadar uzanır.
Öğenin günlük bir babası olduğundan, otoritelerin kuruluşu diğer öğelerin çerçevesinin kenarlarına kadar olan geniş alana saygı gösterir.

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

Önceki ülkelerden girdi eklemek için aşağıdaki yetkililer mevcuttur:

kenar boşluğu- canavarın girişini yaratan güç.
kenar boşluğu-sağ- sağdan girişler yaratan güç.
kenar boşluğu-alt- aşağıdan gelen güç.
kenar boşluğu-sol- kötülük patlamalarını yaratan güç.

Kenar boşluğu, doldurma gücünün yanı sıra, farklı taraflar için değeri kısaca kaydetme yeteneğine de sahiptir. Rukh, üst alandan Godinnik okunu takip ediyor:

Kenar Boşluğu: Üst Kenar Boşluğu Sağ Kenar Boşluğu 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 * /
}

Saygınız için teşekkür ederiz!

Önceki bölümde kenar boşluğu ve dolgu gibi CSS güçlerini biliyorduk. Şimdi bunlara daha detaylı bakacağız ve birbirlerinden nasıl farklı olduklarına ve hangi özelliklere sahip olduklarına bir göz atacağız.

Öğeler arasında bir şekilde boşluklar oluşturabilirsiniz, ancak dolgu, bir bloktan diğerine, yani bloklar arasındaki boşluğa uzanmak anlamına gelir. Okumaların ekran görüntüsünde ön uç:

Dolgu, bloklar arasına boşluk ekler ve kenar boşluğu, bloklar arasında boşluklar oluşturur

Gördüğünüz gibi alanlar ve CSS girişi Birbirleriyle aynı fikirde değiller, ancak bazen koda bakmadan kendilerine hangi yetkinin atandığını belirlemek mümkün olmuyor. Bu durumlarda bloğun çerçevesi veya arka planı değiştirilirse bu özellik kaybolur.

CSS'de bir öğenin kaplama tarafındaki kenar boşluklarını veya girişleri ayarlamak için aşağıdaki kontrollere sahipsiniz:

girmek:

• dolgulu üst: önemi;
• dolgu-sağ: önemi;
• dolgulu alt: önemi;
• sol dolgu: önemi;

alanlar:

• kenar boşluğu üst: önemi;
• sağ kenar boşluğu: önemi;
• kenar boşluğu-alt: önemi;
• kenar boşluğu-sol: önemi;

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

Konuşmak da çok kolay steno giriş marjı ve dolgu CSS'si. Bir elemanın dört tarafı için de alanlar veya girişler ayarlamanız gerekiyorsa, mutlaka dış taraf için gücü ayrı ayrı yazmak gerekir. Her şey daha basit: Kenar boşluğu ve dolgu için 1, 2, 3 veya 4 değer belirleyebilirsiniz. Değerlerin sayısı ayarların nasıl dağıtıldığına bağlıdır:

• 4 değer: girişler elemanın tüm kenarları için aşağıdaki sıraya göre ayarlanır: ön, sağ, alt, sol: dolgu: 2px 4px 5px 10px;
• 3 değer: dolgu ü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: ön taraf, üst ve alt taraflar için aynı anda, ardından sol ve sağ için aynı anda ayarlanır: padding: 6px 12px;
• 1 değer: öğenin tüm kenarları için aynı dolgu ayarlanır: padding: 3px;

Aynı kurallar geçerlidir ve CSS'nin güç marjı. Marj için, bazı durumlarda daha da kötü olabilen negatif ve negatif değerleri (örneğin, -3px) kullanabileceğinize dikkat edin.

marj çöküşü

Durumu düşünün: iki blok elemanı üst üste yerleştirilmiştir ve kenar boşluğu alanını belirtirler. Üst blok kenar boşluğuna: 60 piksele ve alt blok kenar boşluğuna: 30 piksele ayarlanmıştır. İki eleman arasındaki iki alanın basitçe çarpışacağını ve bloklar arasındaki boşluğun 90 piksele eşit olacağını varsaymak mantıklı olacaktır.

Ancak farklı bir şekilde gidelim. Aslında böyle bir durumda, iki bitişik eleman alanından boyut olarak en büyüğü seçildiğinde, bırakma adı verilen bir etki ortaya çıkar. Uygulamamızda elemanlar arası boşluk 60 piksele eşit olacaktır.

Daha büyük bir değere sahip blokların arasında durun

Kenar boşluğunun daraltılması yalnızca öğelerin üst ve alt kenar boşlukları için geçerlidir ve sağ ve sol kenarlardaki kenar boşluklarına kadar uzanmaz. Boşluğun kalıntı değeri farklı durumlarda değişiklik gösterir:

• Marj değeri pozitifse, 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ğerin toplamını çıkarmanız gerekir. Örneğin, 20px ve -18px değerlerinde alan boyutu şuna eşit olacaktır:
  20 + (-18) = 20 - 18 = 2 piksel.
• Değer negatifse, bu sayıların modülünü karşılaştırın ve modül olarak daha büyük (negatif sayılardan da küçük) bir sayı seçin. Örnek: Kenar boşluğu değerlerini -6px ve -8px olarak ayarlamanız gerekiyor. Satır başına 6 ve 8'e eşit eşit sayıdaki modüller. Yıldız 6-8'de parlıyor. Alanın alt torba boyutu -8 pikseldir.
• Değerler farklı CSS birimlerinde belirtildiğinde, bunlar bire kadar listelenir, ardından eşitlenir ve büyük olan değer seçilir.
• Alt öğelerin kenar boşluğu boyutu daha da fazla belirlenir: Üstteki kenar boşluğu alttan daha büyükse öncelik o öğeye verilir. Bu durumda babanın üst ve alt alanlarının boyutları sahanlıkta belirtilenle aynı olacaktır. Babayla diğerleri arasında hiçbir engel olmayacak.

Bugün HTML dolgusu arasındaki farklar üzerinde çalışacağız ( dahili erişim) CSS'de kenar boşluğu (harici giriş). Sözdizimleriyle başlayalım. Bu otoriteleri yazmanın birkaç yolu vardır: temel ve kısaltılmış:

CSS'de Dolgu ve Kenar Boşluğu

İncelenen otoritelerin orijinal yazım biçiminin anlaşılması daha kolaydır çünkü diğer tüm yazı stillerine benzerdir:

Zvichaina'nın girişi:

üst dolgu: 10px; sağ dolgu: 20px; dolgu-alt: 10px; sol dolgu: 20px;

Öte yandan, CSS'deki kısayol girişi tüm gücü tek bir güçlü güçte birleştirir: "doldurma".

Kısa not:

dolgu: 10 piksel 20 piksel 40 piksel 10 piksel;

Dolgu ve kenar boşluğunun dört değeri vardır: üst, sağ, alt ve sol. Yukarıda gösterilen kısaltılmış girişlerde aynı anlamlar tek tip boşluk eklenerek belirtilmiştir. İlk olarak, birkaç değerle canavara erişim, ardından sağa, alta (alt HTML'yi dolduran) ve kötülüğe erişim:

dolgu: SAĞ ÜST ALT SOL; (Dolgu: sağ altta bulunan canavar kötüdür)

Bu giriş üç değere kısaltılabilir ancak sol ve sağ dolgu/kenar boşluğu aynıdır. Örneğin, üst kenar boşluğu 30 piksel, sol ve sağ kenar 10 piksel ve alt kenar 40 piksel ise giriş formunu özelleştirebilirsiniz:

dolgu: 30 piksel 10 piksel 40 piksel;

Yakında iki kez olacak!

Üst ve alt dolgu/kenar boşluğu aynı olduğundan ve sağ ve sol dolgu/kenar boşluğu aynı olduğundan yalnızca iki değer belirtebilirsiniz. Bu durumda üst ve alt kenar boşlukları 10 piksel, sol ve sağ kenar boşlukları ise 20 piksel olur. CSS’miz şöyle görünecek:

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

Tek bir anlam!

Bizim eski versiyon Dolgu ve kenar boşluğu HTML'si için kısaltılmış bir giriş yalnızca bir değer içerir. Tüm girişler mevcutsa bu giriş vikorlaştırılabilir ( canavar, aşağıda, sağ elini kullanan ve sol elini kullanan) Aynı anlamlar ortaya çıkıyor. Tüm tarafların 20 piksellik küçük kenar boşluklarına sahip olmasını isteseydik CSS şöyle görünürdü:

Vikory gönderisi için hangi formatı kullanmalıyım? Örneğin, bir öğeye yalnızca alt kenar boşluğu vermem gerekiyorsa, orijinal girişi değiştireceğim çünkü ağırlığı yalnızca bir tarafa ayarlamam gerekiyor: padding-bottom: 30px;

PADDING ve MARGIN ile nasıl başa çıkılır?

Bu iki otorite arasında gözle görülür bir fark var. Dolgu, bir HTML öğesinin kabının ortasına boşluk eklemek için kullanılır. Kenar boşluğu, elemanların dış kordonunun yakınında boşluk yaratmak için kullanılır.

Dolgunun üzerinize kışlık bir palto giydirdiğinin farkına varın. Ceket senin bir parçan ama farb'ı sana atmış olsaydım, sanki paltonu giymiyormuşsun gibi alt kısmın üstünü kapatırdım.

Ayrıca dolguyu karton kutudaki eşyalar gibi düşünebilirsiniz. Kutuyu polistiren köpükle kaplarsanız kutunun kenarlarına doğru bastırın. CSS'deki dolgu aynıdır.

Şimdi marjı etrafınızdaki görünmez güç alanı olarak düşünün. Güç alanı diğer konuşmaları sizden korur. Palto ve paltoyla kıçına dönerek, sanki paltoyu sana fırlatmışım ve güç alanından geçebilecekmiş gibi, o zaman eskisi gibi sadece seni ve paltonu kaplayacaktı.

Uygulama sitesinde DOLGU ve MARJİN

Unsurlarla ilgili otoritelere bakalım. Paragraf hakkında konuşalım (etiket

), Daha sonra arka plana yeni bir renk ekleyeceğiz ve dış görünüm tarafından 30 piksellik bir kenar boşluğu ekleyeceğiz.

Aşağıda yanında 30px dolgulu bir paragraf olduğunu görebilirsiniz. Sağdaki resimde araçları kullandım Google Chrome Hangi öğe için HTML dolgusunun nerede başladığını/bittiğini göstermek için. Yeşil renk Aşağıdaki resimde kabın etrafına yerleştirilmiş dolgu malzemesi görülmektedir. Arka planın koyu mavi rengi iç alanı dolduracaktır:

Şimdi paragrafa kenar boşluğu ekleyin. Öne ve alta 30 piksel, ayrıca sola ve sağa 20 piksel ekleyeceğim. Aşağıdaki resim bu paragrafın kenar boşluğundan nasıl değiştiğini göstermektedir. Kenar boşluğu kenarlıklara uyacak şekilde ayarlandığından görüntünün gerçek genişliği küçüldü HTML öğesi. Sağda turuncu rengin öğenin etrafındaki kenar boşluğu olduğunu görebilirsiniz. Kenar boşluğu her zaman dolgunun arkasında bulunur ve koyu mavi arka plan kenar boşluğu alanına kadar uzatılmaz:

Şu ana kadar kafanız karıştıysa, örneğin dolgu ve kenar boşluğu HTML'sini anlamaya çalışıyorsanız, o zaman deneme zamanı! CSS'nin gücüne ne kadar karşı koyarsanız ve değerlerini ne kadar değiştirirseniz, nasıl çalıştıklarını o kadar çok anlayacaksınız.

İstatistik çevirisi " CSS DOLGULAMA VS. MARJ VE NASIL KULLANILIR"Güleryüzlü ekip projeye hazırlanıyor.

İyi kötüdür

• öğretici

Bu makaleler basit konuşmayı zorlaştırmaz, ancak sıklıkla unutulan ortak standartlara saygıyı vurgular. Yapının mizanpajın tüm yönleriyle anlaşılmasını sağlamak önemlidir ve giriş kısmında da bunu takip etmek daha az önemli değildir. Ve düzenin ana ilkelerinden biri akışkanlıktır. Ve kolayca herhangi bir değişiklik yapabilir ve hiçbir şeyi bozmazsınız. Jenna hakkında Kenar boşluğu ve dolgu bu konuda çok önemli bir rol oynamaktadır.

Öğelerin sayfadaki orta konumlandırmasında daha az abartılmış ilkeler yansıtılmıştır. Dekoratif unsurlar da birleştirilebilir. Ale o kadar kategorik değil.

Temel prensipler:

1. Giriş, kabinde kalan olası elemana ayarlanmıştır.
2. Girişler bağımsız elemanlar (BEM bloğu) için belirtilebilir.
3. Grubun geri kalan elemanı için giriş sıfıra sıfırlanır (bundan sonra).

Girişler ön elemandan ön tarafa doğru gider.

Kenar boşlukları ön öğeden ön öğeye, birinci öğeden diğerine, aşağıya, soldan sağa ayarlanır.

Bu, bu tür yetkililerin sol kenar boşluğu ve üst kenar boşluğu vikorize edilmez(Suçlama olmadan değil). Dolgu ile tüm küçük parçalar yapılır (dekoratif amaçlı kullanılması, gönderme alanını arttırmak vb. hariç). Bloğun canavara veya kötülüğe erişmesi gerekiyorsa, dolgu üst ve dolgu sol kısımları için alınacaktır.

Doğrudan ağaç kulübelerinin akışına gidin, Blok kendi başına çalışmıyor.
Böbrek statik bir konumdadır ve herhangi bir akış diğerlerinin yapısından uzaklaştırılır.

Giriş, kabinde kalan olası elemana göre ayarlanmıştır

Kenar boşlukları yalnızca ağaç kutularının kenarlık öğelerini tanımlar.

Uygulamanın aşağıdaki yapıya sahip 3 listesi vardır:

• Çok çok uzak, sözel olanın ötesinde.

Erişim sağlamaya çalışmak, yardımcı unsurların yapısına değil, ikincil unsurların yapısına yöneliktir.

Bu durum.main-section__item aynı zamanda listeleri bölme erişimine sahip olabilecek diğer kişileri de içerir. Bir listeye, fazlalığa, gönderilenlere vb. erişmek istiyorsanız aynı etki elde edilebilir.

Bu popoyu bitirmek kolaydır. Daha fazla yatırım görmek istiyorsanız, bazı Marjinemlerin çökmesi durumunda girdileri kullanmak isteyebilirsiniz. ve dolguların farkında olmak.

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

Örneği başlıkla birlikte alırsanız, canavara başlık için bir erişim oluşturmanız gerekir. o zaman kalan eleman bölüm olacaktır ve bunun için varsayılan olarak sıfırlanması gereken üst dolgu, kenar boşluğunun (ve) sıfırlanması gerekecektir.

Bu prensibi takip etmenin en basit nedeni, gelecekte yaklaşımı bilmenizin sizin için veya gelecekte tasarımınızla çalışacak kişi için daha kolay olmasıdır. Kullanışlılık hakkında böyle diyorlar.

Girişlerin zayıf yapısına sahip düzenin dinamik olarak görüntülenmesi veya çoğaltılması durumunda ilgili sorunlar ortaya çıkabilir.

Girişler bağımsız elemanlar için belirtilebilir (BEM bloğu)

Birden fazla zarar görebilecek elemanların girişlerine kesinlikle müdahale etmeyiniz. Ancak metodolojiden memnun değilseniz perspektiften yararlanın. Kimin için yandı. Yanıklar iyidir. Veya ek dersler.

Erişim bloğu oluşturmanız gerekiyorsa. Yardım istemenin hiçbir sakıncası yoktur:

• Elemanın içinden düşme (bu blok elemandan çekilmeyeceğinden erişim mümkün olmayacak ve basitçe başka bir yere yerleştirilebilir).
• Sınıfa ekleyin (bir öğeyle bir blok oluşturabilirsiniz).
• Yanmış (blok olarak, role sahip, yalnızca konumda).

.block__item> .block (sağ kenar boşluğu: 10 piksel;) .block.block__item (sağ kenar boşluğu: 10 piksel;) .block-wrap> .block (sağ kenar boşluğu: 10 piksel;)

Grubun geri kalan elemanı için giriş sıfıra sıfırlanır (bundan sonra)

Örneğin bir liste ve görselleri ele alalım.

Bu yatay menü ve logo (sağdaki).

Kalan li için giriş sıfıra sıfırlanır. girmeye korkuyorum damar elemanları arasında ul ve img. Başka bir prensibe ne oldu?

Başka bir örnek verelim:

...

10.10.10

Yeni öğelere belirtilen şekilde erişmek için bize tıklayın.blog-preview__item (margin-bottom: 20px;). Kalan kenar boşluğu sıfırlanır ve alt girişin yerini dolgulu blog önizleme sekmesi alır. Başka bir prensibe ne oldu?

Çoğu zaman diğer sözde sınıfların düzeltilmesi gerekir: son çocuk.

Öğe: değil (: son-çocuk) (margin-bottom: 20px;) // veya // .item (// diğer stiller // marj-bottom: 20px; &: son-çocuk (margin-bottom: 0;) ) // veya kenar boşluğu, buradaki ana fikir, doğrudan Kenar boşluğu değil, // .item + .item (margin-top: 20px;) // veya // .item (// diğer stiller /) spesifikliğinde / & + & (üst kenar boşluğu: 20 piksel;))

suçlamak

Elbette, bu ilkelere bağlı kalmanın imkansız olduğu ve düzeni olabildiğince temiz oluşturmak için ideal girdileri elde etmeye çabalamanın imkansız olduğu farklılıklar, önemsiz gereksinimler ve nüanslar vardır.

Not: Raju yayınla tanışıyor

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

Bu yöntemi kullanarak biçimlendirmenin anlamı nedir?

Benzer türde kanıtları ararken uzun zamandır işkence görüyorum. Ve çeşitli yan etkilerin eşlik ettiği bir sürü açgözlü, anlaşılmaz CSS kodu yazdıktan sonra, yiyecekleri işlemenin temel kurallarını keşfettiğimi mutlulukla söyleyebilirim.

Daha kesin olmak gerekirse, 2017 yılında bilgisayar için tasarlanan arayüzü bilen herkesin en iyi bildiği tipik bir duruma geri dönelim. Bu en basit kart şablonudur.

Bu uygulamada iki tür aralık görebilirsiniz:

kartlar arasında (blakitni);

kartlar ve kapları arasında (yeşil);

Burada, bir araya getirildiğinde mutlaka birbiriyle bağlantılı olmayan iki farklı kavramımız olduğunu anlamak çok önemlidir. Kartlar ile kapları arasındaki boşluğu örneğin 24 piksele kadar değiştirmem gerekirse, kartların kendi aralarındaki boşluğu artırmaya gerek yoktur.

Popo'nun ek CSS kullanılarak uygulanması?

Kenar boşluklarını ve dahili girdileri kullanarak böyle bir desen oluşturmanın kelimenin tam anlamıyla binlerce yolu vardır, ancak bunlardan kenar boşluğu ve dolgu güçlerinin doğru kullanımını gösteren birini dikkatinize 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 8 piksel;
}

Toplamda 2 seçici ve 2 kural.

Hangi fonksiyon artı işaretiyle gösterilir?

sembol + kendisi mi toplam seçici. Bu, yalnızca bu seçiciden önce belirtilen öğenin hemen ardından gelen öğeyi belirtir.

Yukarıdaki görselden de görülebileceği gibi penceremizde ek seçici seçilecektir. başka herhangi bir kart tarafından iletilen cilt kartı. Bu şekilde para seçicinin yardımıyla cilt kartı için sol alanı ilkinin arkasına ayarlayabiliriz.

Bu, her zaman sekiz piksele eşit olacak şekilde gerektiği kadar kart ekleme olanağımız olduğu anlamına gelir.

Siparişi kartlar yerine başka bir şeyle vermemiz gerekene kadar her şey mucizevi bir şekilde çalışıyor. Diyelim ki, düğme "Kart ekle" ("Kart ekle"):

CSS kodunun zaten açık olan parçasına bakılırsa, class.card öğesine yeni bir düğme atamayız çünkü bu bir kart değildir. Peki ya? Neden class.add-card için ek adlar yaratalım, aynı kuralı class.card olan kenar boşluğunun gücüyle nasıl değiştirelim? Hayır, daha fazla çözüm var.

Lobotomize edilmiş baykuş * + *.

Aslında benzer. Komik çağrışımına rağmen, bu yöntem mucizevi bir şekilde çalışıyor ve o zamandan beri rüyamı öğrendiğimden beri istikrarlı bir şekilde zafere ulaştım. Tanrım, bütün bunlar neyle ilgili? Aşağıdaki CSS koduna bir göz atın:

Konteyner (
dolgu: 16 piksel;
}
/ * Peki lobotomili Baykuş'u buldunuz mu? 😜 */
.kapsayıcı> * + * (
kenar boşluğu: 0 0 0 8 piksel;
}

Muhtemelen hatırlayacağınız gibi ön seçici diğer kartı ileten karta yapışmıştı. Şimdi bu yardımla formatlayabiliriz doğrudan önünde başka bir öğenin bulunduğu bir cilt öğesi, Hemen düğmeyi açın.

Kesenin içinde.

Buradaki sunumun, malzemenin iç girişleri ve tarlaları kapatmak yerine toprağın konteynırın içinde olup olmadığını anlamanıza yardımcı olacağını umuyorum.

Bir rehber olarak, kamuoyunun gözü önünde doğrulanmış iki kuralın yanı sıra, popo işaretini gösteren bir kalem projesini de değerlendirmelerinize sunmak istiyorum. Ozhe, vikoristamo:

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

marj- Elemanlar arasındaki boşluklar için kabın ortasında elemanlar bulunmaktadır.

19 bölüm

TL; Doktor: Sahne arkasında, çerçevem ​​veya arka planım varsa, damlalar hariç her yerde alanı vurguluyorum ve bu görünür alanın ortasındaki boşluğu artırmak istiyorum.

Kenar boşluğu ile kenar boşluğu arasındaki en büyük fark, dikey kenar boşluklarının otomatik olarak sıkıştırılması ancak kenar boşluğunun sıkıştırılmamasıdır.

1em açıklıklı, biri diğerinin üzerinde olan iki öğeye bakalım. Bu erişime öğenin bir kısmı saygı gösterir ve gelecekte de korunur.

Bu şekilde, ilk öğenin yerine çıkarırsınız, ardından ilk öğeyi değiştirirsiniz, sonra bir başka öğeyi eklersiniz ve ardından başka bir öğeyi değiştirirsiniz.

Böylece uç kesedeki bu iki eleman yerine 2 eleman başına 2 em olacaktır.

Şimdi bu girişi 1em alanıyla değiştirin. Kenar boşlukları öğe sınırları arasına eklenir ve bitişik öğelerin alanları üst üste gelir.

Bu şekilde, bu durumda ilk elemanı kaldırırsınız, ardından birleştirilmiş alanın 1em'ini ve ardından diğer elemanın yerine geçersiniz. Böylece bu iki elemanın yeri 1 1em doğrusu üzerinde yer alır.

Hangi öğeden bahsettiğinizden bağımsız olarak, öğeler arasında ne söylemek istediğinizi biliyorsanız bu daha da ilginç olabilir.

Diğer iki büyük fayda, girdinin alan yerine arka planın/görüntünün tıklanabilir alanına ve rengine dahil edilmesi gerçeğinde yatmaktadır.

Hepsinden iyisi, bunu dipnotlarla, diyagramlarla ve "kendin dene" sözleriyle açıklıyorum - bu.

Aşağıda yer alan diyagram, toplantının geçerliliğinin görsel bir göstergesidir.

Dikkat edilmesi gereken bir nokta, standartları takip eden tarayıcıların (IE tuhaflıkları - sorun değil) yalnızca belirli bir genişlikte içeriğin bir kısmını görüntülemesidir; bu nedenle düzen düzenlerinde buna dikkat edin. Ayrıca pencere çerçevesinde Bootstrap 3 desteğini görebilenlere de saygı gösterin.

MARJ vs DOLGU MALZEMESİ:

Kenar boşluğu, bu eleman ile yan tarafın diğer elemanları arasında bir stand oluşturulması için elemanda hesaplanır. Giriş yapılır yapılmaz mekan ile elemanın kordonu arasında bir boşluk oluşturulması gerekmektedir.

Kenar boşluğu, öğenin bir parçası değildir ancak ek kısım, öğenin bir parçasıdır.

Beslenmeniz için daha fazla teknik açıklamalar, eğer marjlar hakkında düşünmenin bir yolunu arıyorsanız ve bunları seçip seçmeyeceğinizi ve nasıl seçeceğinizi seçmenize yardımcı olabilecek ek açıklamalar.

Bloğun elemanlarını duvara asılacak resimlerle eşleştirin:

• vikno tarayıcı bir duvara benziyor.
• içerik fotoğrafa benzer.
• marjçerçeveli görüntüler arasındaki boşluğa benzer.
• ek olarak fotoğraf gibi paspaslamaya benzer.
• Kordon çerçeve kordonuna benzer.

Marjlar ve girdiler hakkındaki en önemli bilgilere gelince, genel kurallara uymak önemlidir marj, Duvardaki diğer konuşmaların önüne yerleştirilen öğeyi sırayla yerleştirirseniz ve bunlara ek olarak. > Dinlediğinizde dış görünüm elementin kendisi. 1'den büyük bir öğe girmediğiniz sürece kenar boşluğu, öğenin boyutunu değiştirmez.

1 Bu pencere modeli box-sizing özelliği kullanılarak değiştirilebilir.

Alan yoksa öğenin genişliği konusunda endişelenmenize gerek yoktur.

(padding: 10px;) verdiğiniz sürece, elemanın genişliğini değiştirmeniz gerekecektir. 20 piksel, kaydetmek " yerleştirmek“Ve bunun gibi diğer unsurları da yok etmeyin.

Bu yüzden "paketlenmiş" her şeyi kaldırmak için dolguları düzenlemeye başlıyorum ve ardından küçük ayarlamalar için alanları düzenlemeye başlıyorum.

Bilmeniz gereken bir şey daha, dolguların daha çılgın olduğudur. farklı tarayıcılarda, І IE negatif alanlara yerleştirilecek kadar iyi değil.

HTML ekseni dolgu ve kenar boşluğunun tıklanabilirliği ve arka plan dolgusunu nasıl etkilediğini gösterir. Nesne, ek nesnesine tıklamayı seçer, ancak babasının nesnesine gitmek için nesnenin kenar boşluğu alanına tıklar.

$(".dış"). Click(function(e)(console.log("outer"); e.stopPropagation();)); $(".İç"). Click(function(e)(console.log("inner"); e.stopPropagation();)); .dış (dolgu: 10 piksel; arka plan: kırmızı;) . iç (kenar boşluğu: 10 piksel; dolgu: 10 piksel; arka plan: mavi; kenarlık: düz beyaz 1 piksel;)

Alanlar, elemanın etrafındaki alanı (sınır konumu) temizler ve katkı maddesi, elemanın hemen yanındaki (kenarın ortasındaki) alanı temizler.

Bu, öğenizin dış kordonlarından haberi olmadığı anlamına gelir; bu nedenle, dinamik web kontrol öğeleri dağıtıyorsanız, kayıt ve kenar boşluğunu mümkün olduğunca değiştirmenizi öneririm.

Lütfen marjı birçok kez değiştirmeniz gerektiğini unutmayın.

CSS'de öğelerinizin etrafında boşluk yaratmanın iki yolu vardır: kenar boşlukları ve dolgu. Çoğu senaryoda, kokular işlevsel olarak aynıdır ancak gerçekte biraz farklı davranıyor gibi görünmektedirler. Yan taraftaki öğeleri taşımak için ne kullanmanız gerektiğini seçerken alanlar ve girdiler arasında dikkate almanız gereken önemli hususlar vardır. Prote, bu durumlarda, eğer herhangi bir alan veya yaklaşım tek ve aynı etki için kullanılabiliyorsa, karar genellikle özel koşullara indirgenir.

Koli vikorystuvati alanları

Aralığınızın sınır yetkilileri tarafından oluşturulan alanın sınırları dışında görünmesini mi istiyorsunuz? Tarlalar kordon sınırlarının ötesinde yer alıyor, bu yüzden sınırınızın tek bir yerde kaybolmasını istiyorsanız onları vikoristleştiriyorsunuz. Bu biraz acı verici olabilir, örneğin sizin yaşadığınız gibi, kiriş paneli bunun yerine ana alanın dışına çıkmak istediğiniz bir çerçeve ile.

Arka plan renginin veya görsellerin özel alanınızı işgal etmesini istemezsiniz. arka plan renkleri Ve görüntüler kenarlığa yerleştirilir, böylece arka planınızı çalışırken alanla, alanlarla, istediğiniz gibi güçle kaydedebilirsiniz.

Canavara ve elementinizin altına yer açmak istiyorsunuz. Üst ve alt alanlar, alt alanlardan farklı şekilde yapılandırılmıştır; iki alan bir üst üste istiflendiğinden, bunlar en büyük alan kümesinin boyutuna genişletilir. Örneğin, üst kenar boşluğu 20 piksel ve alt kenar boşluğu 15 piksel olan bir paragraf eklersem, paragraflar arasında yalnızca 20 piksel boşluk kalır (iki kenar boşluğu bire bir hizalanır ve en büyük olan kazanır) .

Koli vikoristovati contası

Bu güç bir ila birkaç değer arasında değişebilir.

Resimde açık gri renk, dolgu yetkisinin belirtildiği bölgeyi belirtir:

1. istekte anlamı ne(5px 10px 15px 20px) - iç girişlerin düzenlenme sırası rahatsız edici olacaktır: Tepe(5 piksel) - Sağ(10 piksel) - Alt(15 piksel) - Sol(20 piksel). İç girişlerin düzenlenme sırasını tek sesle hatırlamak için İngilizce kelimeyi kullanabilirsiniz. TR sen B.L. e (de T- tepe, R- Sağ, B- alt, L- sol).


2. istekte üçlü değer(5px 10px 15px) - iç girişlerin düzenlenme sırası rahatsız edici olacaktır: Tepe(5 piksel) - Sağ sol(10 piksel) - Alt(15 piksel).


3. istekte iki değer(5px 10px) - ilk değer (5px), eleman yerine üst ve alt kısımdaki iç açıklığın boyutunu ayarlayacaktır, diğer (10px) değeri ise eleman yerine üst ve sağ taraftaki iç açıklığın boyutunu ayarlayacaktır.


4. istekte tek değer(5px) - her taraftan iç giriş aynı boyutta olacaktır - 5px.

Tarayıcı desteği

güç			Opera		IExplorer	Kenar
dolgu malzemesi	1.0	1.0	3.5	1.0	4.0	12.0

CSS sözdizimi:

dolgu: "uzunluk | ilk | devral";

JavaScript sözdizimi:

Object.style.padding = "5 piksel"

gücün anlamı

CSS sürümü

CSS1

reddetmek

HAYIR.

Animasyonlu

Bu yüzden.

popo wikiristannya