CSS'de kenar boşluğu ve dolgu ne zaman kullanılır? CSS Kenar Boşluğu ve Dolgu Nasıl Ayarlanır (ve Harika Düzen İpuçları)

Tanım

Öğenin her bir kenarındaki dolgu miktarını ayarlar. Kenar boşluğu, geçerli öğenin sınırından ana öğenin iç sınırına kadar olan boşluktur (Şekil 1).

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

Öğenin bir ebeveyni yoksa dolgu, pencerenin kendisinin de varsayılan olarak dolgu ayarına sahip olduğu dikkate alınarak, öğenin kenarından tarayıcı penceresinin kenarına kadar olan mesafe olacaktır. Onlardan kurtulmak için seçicinin marj değerini ayarlamanız gerekir. sıfıra eşittir.

Kenar boşluğu özelliği, bir öğenin tüm kenarları için kenar boşluğu değerini aynı anda ayarlamanıza veya yalnızca belirli kenarlar için tanımlamanıza olanak tanır.

Sözdizimi

kenar boşluğu: [değer | ilgi | otomatik] (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.

Girinti miktarı piksel (px), yüzde (%) veya CSS için kabul edilebilir diğer birimlerle belirtilebilir. Değer pozitif ya da negatif bir sayı olabilir.

Otomatik Girinti miktarının tarayıcı tarafından otomatik olarak hesaplanacağını belirtir.

inherit Ebeveynin değerini devralır.

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.

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, kenar boşluğu: 0 otomatik kuralı kullanılarak bir bloğun ortalamasını desteklemez. Ayrıca bu tarayıcıda, ana öğelerin içine yerleştirilmiş kayan öğeler için sol veya sağ dolgu değerinin iki katına çıkarılmasıyla ilgili bir hata var. Ebeveyn tarafına bitişik olan kenar boşluğu iki katına çıkarılır. Sorun genellikle kayan öğeye display: inline eklenerek çözülür.

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

Dikey olarak yan yana yerleştirilen blok elemanlar için, girintiler toplanmadığında, birbirleriyle birleştirildiğinde çökme etkisi gözlemlenir. Çökmenin kendisi, üstte veya altta girintiler bulunan iki veya daha fazla blok üzerinde (biri diğerinin içine yerleştirilebilir) etki eder, bitişik girintiler ise bir blokta birleştirilir. Sol ve sağ dolgu için hiçbir zaman daraltma uygulanmaz.

Daralt çalışmıyor:

• dolgu özelliği daraltılan tarafta ayarlanmış olan öğeler için.
• Çöken tarafta belirlenmiş bir sınırı olan elemanlar için;
• mutlak konumlandırmaya sahip elemanlar üzerinde, yani. konumu mutlak olarak ayarlanmış olanlar;
• kayan öğelerde (bunun için kayan nokta özelliği left veya right olarak ayarlanmıştır);
• satır içi öğeler için;
• İçin .

11/21/16 2K

Bugün HTML dolgusu ( dolgu) ve CSS'de kenar boşluğu (kenar boşluğu). Ama önce sözdizimlerini anlayalım. Bu özellikleri yazmanın birkaç yolu vardır: normal ve kısa yol:

CSS'de Dolgu ve Kenar Boşluğu

Söz konusu özellikler için olağan notasyon biçiminin anlaşılması daha kolaydır çünkü diğer tüm stil notasyonlarına benzerdir:

Düzenli giriş:

üst dolgu: 10 piksel;

sağ dolgu: 20 piksel; dolgu-alt: 10px;«.

sol dolgu: 20 piksel;

Öte yandan, CSS kısaltması tüm bu özellikleri tek bir ortak özellikte birleştirir "

dolgu Kısa giriş: 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ısa gösterim aynı zamanda bir boşlukla ayrılmış dört değeri de belirtir. Dört değerden ilki üst girinti, ardından sağ girinti, alt (

alt HTML'yi doldurma

) ve solda:

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

Sol ve sağ dolgu/kenar boşluğu aynı ise bu giriş üç değere düşürülebilir. Örneğin, üst kenar boşluğu 30 piksel, sol ve sağ kenar 10 piksel ve alt kenar 40 piksel ise aşağıdaki gösterimi kullanabilirsiniz:

dolgu: 30 piksel 10 piksel 40 piksel;

Bunu iki değere indiriyoruz!

Dolgu ve kenar boşluğu için HTML kısayolunun en son sürümü yalnızca bir değer içeriyor. Bu gösterim, tüm girintiler ( üst, alt, sağ ve sol) aynı anlama sahiptir. Tüm tarafların 20 piksel dolguya sahip olmasını isteseydik CSS şöyle görünürdü:

Hangi kayıt formatı ne zaman kullanılmalı? Örneğin, bir öğeye yalnızca alt dolgu vermek istersem, ö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 gözle görülür bir fark vardır. Dolgu, bir HTML öğesinin kabı içindeki alanı tanımlamak için kullanılır. Kenar boşluğu, elemanların dış kenarlarının etrafındaki boşluğu tanımlamak için kullanılır.

Üzerinize kışlık bir mont giydirdiğinizi hayal edin. Palto senin bir parçan ama sana boya atarsam, o paltoyu giymediğin zamana göre daha geniş bir alanı kaplar.

Dolguyu bir karton kutudaki dolgu olarak da düşünebilirsiniz. Bir kutuyu köpükle doldurduğunuzda, bunu içindekileri kutunun kenarlarından uzakta tutmak için kullanırsınız. CSS'de dolgu aynı şeyi yapar.

Şimdi marjı etrafınızdaki görünmez bir güç alanı olarak düşünün. Güç alanı diğer şeyleri sizden uzak tutar. Ceket ve boya örneğine dönecek olursak, eğer üzerinize boya fırlatsaydım ve boya güç alanından geçebilseydi, yine de yalnızca sizi ve ceketinizi kaplardı.

Bir site örneğinde PADDING ve MARGIN

Öğeli örnekleri kullanarak özelliklere bakalım. Bir paragrafla başlayacağız (etiket

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

Aşağıda solda, etrafında 30px dolgu bulunan 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 resimdeki yeşil renk, kabın etrafına yerleştirilen dolgu malzemesidir. Koyu mavi arka plan rengi iç alanı doldurur:

Şimdi paragrafa bir kenar boşluğu ekleyelim. Üst ve alta 30 piksel, ayrıca sola ve sağa 20 piksel ekleyeceğim. Soldaki aşağıdaki resim bu paragrafın kenar boşluğundan nasıl değiştiğini göstermektedir. Kenar boşluğu başka bir HTML öğesini kenarlıktan uzağa ittiği için görüntünün gerçek genişliği daha küçüktür. Sağda turuncu rengin öğ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 kadar uzanmaz.

Makaleler BT notları HTML ve CSS Sonsuza kadar hatırlayalım: kenar boşluğu ve dolgu arasındaki fark nedir
Forumlarda dolaşırken şu sorunun hala ortaya çıktığı gerçeğiyle karşılaştım: Ne işe yarar? dolgu, Ve ne marj ve aralarındaki farklar nelerdir? Bu yüzden size bunu hatırlatmaya karar verdim. O halde, abartılı ifadelere başvurmadan, sorunu ortaya koyalım ve her şeyin netleşeceği bir örneğe bakalım.
Görev: sayfada Kırmızı bir bloğa ihtiyacım var(200x200 piksel), tarayıcının kenarlarından uzaklaşırüst ve sol sırasıyla 40 ve 70 piksel ve içindeki metin sola ve üste girintilidir 40 piksele kadar.
Çözüm: Resme ve koda bakın. Kırmızı bloğumuz 200 x 200 pikseli geçmemeli ve tarayıcının kenarlarından (veya diğer içerik bloklarından) girintili olmalıdır. Aslında bu girintileri kenar boşluğundan yapıyoruz. Dolgu yaparsak, kırmızı bloğumuzun içinde girinti oluşur ve bloğun arka planıyla (yani kırmızı) girinti elde edilir.

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

Kullanılan özelliklere ek olarak (6-9. satırlar), kenar boşluğu-sağ, dolgu-sağ, kenar boşluğu-alt, dolgu-alt özellikleri de vardır; bunlar sırasıyla sağ ve altta girinti içindir. Bu özelliklerin tümüne ilişkin değerler piksel (px), yüzde (%) veya em birimleri cinsinden olabilir.
Prensip olarak hepsi bu. Ancak onlarla çalışmanın hala bazı özellikleri var.

Kenar boşluğu ve dolgu özellikleri

Bloklarda CSS kayan özelliği varsa, solda ve sağda çift kenar boşluğu kalmaması için bloklara display:inline atamanız gerekir (daha fazla ayrıntı için Internet Explorer 6 ve Internet Explorer ile nasıl arkadaş olunur makalesine bakın). CSS kenar boşluğu özelliği?)

Dolgu kullanıldığında 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.

Bir bloğa otomatik olarak sol kenar boşluğu ve sağ kenar boşluğu değerleri verilmişse, blok sabit bir genişliğe (örneğin 400 piksel) sahipse ve kayan CSS özelliğine sahip değilse, bu blok merkeze hizalanacaktır. Bulunduğu elementin. Aslında, merkeze hizalamalı kauçuk olmayan düzen için genellikle bu hizalama yöntemi kullanılır. IE 5.5 ve önceki sürümler auto değerini desteklemese de bu yine de onu her zaman kullanmanızı engellemez =).

Tablolarda dolgu ve kenar boşluğu kullanılması önerilmez çünkü etkisi farklı tarayıcılarda tahmin edilemeyebilir.
Ve söylemek istediğim son şey. Kısa yazı yapılarını kullanmayı unutmayın, örneğin kenar boşluğu: 10px 0 5px 20px;. Girinti sıfırsa, parametreleri belirtmeden basitçe sıfır koyabilirsiniz. Hangi parametrenin hangi sınırla ilgili olduğunu hatırlamak çok kolaydır - bir blok için girintiler saat yönünde gider: ilk sayı üstte, ikincisi sağda, üçüncüsü altta, dördüncüsü sağda. sol.
Aslında bugün sana söylemek istediğim tek şey buydu. Herkese mutlu hafta sonları!
+

Bu başlıkta materyalle ilgili soru sorabilirsiniz.

Bu eğitim, kenarlık, dolgu ve kenar boşluğu gibi CSS özelliklerini daha iyi anlamanıza yardımcı olacaktır. Bu özellikler, geliştiricilerin sayfadaki öğeleri düzene göre konumlandırmasına büyük ölçüde yardımcı olur.

Bir div oluşturalım ve ona kenar boşluğu, dolgu ve kenarlık özelliklerini verelim.

Dolgu özelliği

CSS dolgu özelliği, bir öğenin kenarlığı ile içeriği arasındaki mesafeyi belirtir. Bunu şu şekilde tanımlayabilirsiniz:

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

Bu giriş kısaltılabilir:

• dolgu:25 piksel 50 piksel 75 piksel 100 piksel;
  • üst 25 piksel
  • sağ 50 piksel
  • alt 75 piksel
  • 100 piksel kaldı
• dolgu:25 piksel 50 piksel 75 piksel;
  • üst 25 piksel
  • sağ ve sol 50px
  • alt 75 piksel
• dolgu:25 piksel 50 piksel;
  • üst ve alt 25 piksel
  • sağ ve sol 50px
• dolgu:25 piksel;
  • tamamı 25 piksel

Not: dolgu değeri öğenin genişliğine eklenir ve öğenin arka planına bağlıdır.

Başka bir deyişle, div-1 sınıfına sahip bir div öğemiz var:

Div.div-1( genişlik:150 piksel; dolgu: 25 piksel;)

Tarayıcı, öğenin genişliğine sol ve sağ dolgu ekleyecektir. Sonuç olarak 200px genişliğinde bir eleman elde edeceğiz.

Sınır mülkü

CSS border özelliği, bir öğenin kenarlığının stilini ve rengini tanımlamanıza olanak tanır.

kenar genişliği

Kenarlığın genişliğini belirlemek için border-width özelliği kullanılır. Genişlik piksel cinsinden veya önceden tanımlanmış değerlerden biri kullanılarak belirtilir: ince, orta veya kalın.

kenar rengi

Border-color özelliği kenarlığın rengini tanımlamak için kullanılır. Renk aşağıdaki şekillerde ayarlanabilir:

• isim - rengin adı, örneğin "kırmızı"
• RGB - RGB değerini tanımlar; örneğin, "rgb(255,0,0)"
• Hex - bir onaltılık değer tanımlar; örneğin, "#ff0000"

kenar stili

• noktalı: Kesin bir sınır tanımlar
• kesikli: Noktalı kenarlığı tanımlar
• sağlam: Kalın bir kenarlık tanımlar
• çift: İki sınırı tanımlar. Aralarındaki mesafe kenarlık genişliği değerine bağlıdır
• oluk: 3D depresif kenarlığı tanımlar
• sırt: 3B dışbükey kenarlığı tanımlar
• ek: Bloğun bastırıldığında sallanması için sınırı tanımlar
• başlangıç: Bloğun dışbükey yuvarlanması için bir sınır tanımlar

Öğenin kenarlık özelliklerini kısa yoldan yazabilirsiniz:

Div.div-2( kenarlık:1 piksel katı #ccc; )

Marj özelliği

CSS kenar boşluğu özelliği, bir öğenin etrafındaki boşluk miktarını belirtir. Kenar boşluğu, öğenin etrafındaki (kenarlığın dışındaki) boşluğu temizler. Kenar boşluğunun arka plan rengi yoktur ve her zaman şeffaftır.

Bunun gibi bir öğe için marj değerlerini tanımlayabilirsiniz:

• üst kenar boşluğu:100 piksel;
• kenar boşluğu alt:100 piksel;
• sağ kenar boşluğu:50 piksel;
• sol kenar boşluğu: 50 piksel;

Bu giriş kısaltılabilir:

• kenar boşluğu:25 piksel 50 piksel 75 piksel 100 piksel;
  • üst kenar boşluğu 25 piksel
  • sağ kenar boşluğu 50 piksel
  • alt kenar boşluğu 75 piksel
  • sol kenar boşluğu 100 piksel
• kenar boşluğu:25 piksel 50 piksel 75 piksel;
  • üst kenar boşluğu 25 piksel
  • sağ ve sol kenar boşluğu 50 piksel
  • alt kenar boşluğu 75 piksel
• kenar boşluğu:25 piksel 50 piksel;
  • üst ve alt kenar boşluğu 25 piksel
  • sağ ve sol kenar boşluğu 50 piksel
• kenar boşluğu:25 piksel;
  • dört kenar boşluğunun tümü 25 piksel

Varsayılan kenar boşluğu değerlerini kullanarak bloğu yatay olarak ortalayabilirsiniz.

Kaynak: Kenar boşluğu veya dolgu?
Philip Sporrer.
Çeviri: vl49.

Kenar boşluklarını kullanmak ne zaman daha iyidir ve biçimlendirme amacıyla dolguyu ne zaman kullanmak gerekir ve herhangi bir fark yaratır mı?

Uygun yanıtları bulmak için çok uzun süre uğraştım. Ancak çeşitli yan etkilerin de eşlik ettiği çok sayıda korkunç, çözülemez CSS kodu yazdıktan sonra, yukarıda sıralanan konulara ilişkin temel katı kuralları bulduğumu rahatlıkla söyleyebildim.

Açıklık getirmek için, 2017'deki her kullanıcı arayüzü geliştiricisinin muhtemelen aşina olduğu tipik bir duruma bakalım. Basit bir kart şablonumuz var.

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

kartlar arasında (mavi);

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

Bir araya getirildiğinde birbiriyle ilişkilendirilmemesi gereken iki farklı kavramla karşı karşıya olduğumuzu burada anlamak çok önemlidir. Yani, kartlar ile kapları arasındaki mesafeyi örneğin 24 piksele değiştirmem gerekirse, bu, kartların arasındaki boşluğu hiçbir şekilde etkilememelidir.

Örneği CSS kullanarak mı uyguluyorsunuz?

Kenar boşlukları ve dolgu kullanarak buna benzer bir şablon oluşturmanın kelimenin tam anlamıyla binlerce yolu vardır, ancak kenar boşluğu ve dolgu özelliklerinin doğru kullanımını gösteren bir yol sunmak istiyorum. Üstelik bu yöntem ileride başka kartlar eklemenize de olanak tanır.

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

Yalnızca 2 seçici ve 2 kural.

Artı işareti hangi işlevi yerine getirir?

Sembol + temsil eder bitişik seçici. Yalnızca bu seçiciden önce belirtilen öğenin hemen ardından gelen öğeyi işaret eder.

Yukarıdaki resimden de görülebileceği gibi bizim durumumuzda bu seçici seçecektir. herhangi bir kartın önünde yer alan her kart. Böylece, bitişik seçiciyi kullanarak, ilk kart dışındaki her kart için sol kenar boşluğunu ayarlayabiliriz.

Bu, aralarındaki mesafe her zaman sekiz piksel olacak şekilde gerekli sayıda kart ekleme olanağımız olduğu anlamına gelir.

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"):

Mevcut CSS kod pasajına bakılırsa, .card sınıfını büyük olasılıkla düğmeyi temsil eden yeni öğeye atamayacağız çünkü bu bir kart değildir. Bu nasıl olabilir? Bunun için, .card sınıfıyla aynı marj özelliği ile aynı kuralı içeren .add-card sınıf adını oluşturmaya değer mi? Hayır, daha iyi bir çözüm var.

Lobotomili baykuş *++* .

Neye benziyor? Komik çağrışımlara rağmen bu yöntem harika çalışıyor ve varlığını öğrendiğimden beri sürekli kullanıyorum. Peki tüm bunlar neyle ilgili? İşte ilgili CSS koduna bir bakış:

Konteyner (
dolgu: 16 piksel;
}
/* peki, lobotomize edilmiş baykuşu tanıdın mı? 😜 */
.kapsayıcı > * + * (
kenar boşluğu: 0 0 0 8 piksel;
}

Hatırlayacağınız gibi önceki seçici, önünde başka bir kart bulunan herhangi bir karta uygulanıyordu. Artık onun yardımıyla biçimlendirebiliriz hemen önünde başka bir element bulunan her element, elbette düğme de dahil.

Sonunda.

Burada sunulan materyalin, bir kap içindeki içeriği ayırmak için ne zaman dolguyu ve ne zaman kenar boşluklarını kullanacağınızı anlamanıza yardımcı olduğunu içtenlikle umuyorum.

Sonuç olarak, yukarıdaki örneklerin yanı sıra kendi deneyimlerime dayanarak test ettiğim iki kuralı gösteren bir kalem projesini beğenilerinize sunmak istiyorum. Öyleyse şunu kullanalım:

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

marj— konteynerin içindeki elemanlar arasındaki boşluklar için.