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 bir sürü korkunç, okunaksız CSS kodu yazdıktan sonra, çeşitli yan etkilerle birlikte, yukarıda listelenen konularla ilgili temel katı kuralları bulduğumu güvenle söyleyebilirim.

Netlik için, büyük olasılıkla her geliştirici tarafından iyi bilinen tipik bir duruma dönelim. Kullanıcı arayüzü 2017 yılında. En basit kart şablonuna sahibiz.

AT bu örnekİki tür aralık vardır:

kartlar arasında (mavi);

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

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

CSS ile bir örnek uygulama?

Kenar boşlukları ve dolgu kullanarak böyle bir şablon oluşturmanın kelimenin tam anlamıyla binlerce yolu vardır, ancak bunlardan birini, kenar boşluğu ve dolgu özelliklerinin doğru kullanımını gösteren bir tanesini dikkatinize sunmak istiyorum. Ayrıca 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"):

Halihazırda sahip olduğumuz CSS snippet'ine dayanarak, düğmeyi temsil eden yeni öğeye bir kart olmadığı için muhtemelen bir .card sınıfı 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.

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

Sonuç olarak, yukarıdaki örnekleri gösteren bir kalem projesini ve kendi tecrübemle test edilmiş iki kuralı değerlendirmenize 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.

Mesaj Görüntüleme: 427

Merhaba, blog sitesinin sevgili okuyucuları. Bugün çalışma konusuna devam etmek ve girintiler ve kenarlıklar belirlemenize izin veren stil kurallarını düşünmek istiyorum. HTML öğeleri: 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, belgeler (web sayfaları) oluşturmak 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, içerik alanından ana öğe). Ayrıca, bu sadece mantıklı olacak şekilde sağ ve sol kenar boşluğu için değil, aynı zamanda üst ve alt kenar boşluğu için de geçerlidir, yüzdeler konteynerin 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 boşlukların eşitliğine ek olarak, yukarıdaki ve altındaki değerlerinin eşitliği varsa: margin: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.

Birbirinin altına yerleştirilmiş iki bloğumuz varsa (kenar boşlukları yalnızca dikey olarak daraltılabilir) 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), o zaman daha büyük bir Marj değeri daha küçük olanı emecektir. 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 Kenar Boşluğu ve dikey olarak bitişik 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 komşu 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 bahsedilmiyor ve bu CSS kuralı negatif değerlere izin vermiyor (sadece pozitif, sıfır veya daha yüksek olabilirler). Ş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. İçindeki bir şeyi azaltmanız gerekiyorsa (üç, iki veya hatta bir değere kadar), dahili girintiler için tamamen aynı başarı ile çalışacak olan harici girintiler için hemen 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.

sınır genişliği:2px;

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 ayarlanmamışsa, 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ğu için olarak kullanılabilir. Genel kurallar, ve tarafların her biri için ayrı:

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

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) İç mekan için farklı tasarım ve Dış bağlantılar CSS aracılığıyla
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
Liste stili (tür, görüntü, konum) - Özelleştirilecek Css kuralları dış görünüş listeler HTML Kodu
CSS'de arka plan (renk, konum, görüntü, tekrar, ek) - tümü arka plan rengini ayarlamak veya Arkaplan resmi HTML öğeleri
CSS ne içindir, basamaklı stil sayfaları nasıl bağlanır? html belgesi ve bu dilin temel sözdizimi nth-child sözde sınıfını kullanarak sitedeki tablo, liste ve diğer Html öğelerinin satırlarının arka plan rengi nasıl değiştirilir?
CSS'de yazı tiplerini şekillendirmek için Yazı Tipi (Ağırlık, Aile, Boyut, Stil) ve Satır Yüksekliği kuralları

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 piksele 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ğ kenar boşluğu, kenar boşluğu alt, alt kenar boşluğu özellikleri de vardır - bunlar sırasıyla sağ ve alt 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. Hangi parametrenin hangi sınıra ait olduğunu hatırlamak çok basittir - blok için girintiler saat yönünde ilerler: ilk sayı üstte, ikincisi sağda, üçüncüsü altta, dördüncüsü solda.

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

Bu özellik bir ila dört değere sahip olabilir.

Resimde, açık gri renk, padding özelliğinin sorumlu olduğu alanı gösterir:

1. belirttiğinizde dört değer(5px 10px 15px 20px ) - dolgu sırası aşağıdaki gibi olacaktır: Tepe(5 piksel ) - Doğru(10 piksel ) - alt(15 piksel ) - Ayrıldı(20 piksel ). Bir bildirimde girinti sırasını hatırlamak için İngilizce kelimeyi kullanabilirsiniz. TR sen BL e(nerede T-tepe, R-Sağ, B- alt, L- ayrıldı).


2. belirttiğinizde üç anlam(5px 10px 15px ) - doldurma sırası aşağıdaki gibi olacaktır: Tepe(5 piksel ) - Sağ sol(10 piksel ) - alt(15 piksel ).


3. belirttiğinizde iki değer(5px 10px ) - ilk değer (5px ) öğe içeriğinin üstünden ve altından dolgunun boyutunu ayarlar, ikinci (10px ) değer ise dolguyu öğe içeriğinin soluna ve sağına ayarlar.


4. belirttiğinizde bir değer(5px) - her taraftaki dolgu aynı boyutta olacaktır - 5px.

Tarayıcı Desteği

Mülk			Opera		IExplorer	kenar
dolgu malzemesi	1.0	1.0	3.5	1.0	4.0	12.0

CSS sözdizimi:

dolgu: "uzunluk | ilk | miras" ;

JavaScript sözdizimi:

nesne.style.padding = "5 piksel"

Mülk değerleri

CSS sürümü

CSS1

Miras

Numara.

animasyonlu

Evet.

kullanım örneği

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

dolgu malzemesi

Doldurma, bir öğenin kenarlığın iç kenarından içeriğe sahip olduğu dolgu miktarını ayarlayan bir özelliktir. İçerik düz metin, resim veya kendi kenar boşluklarına sahip olabilen bir alt öğe olabilir.

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

#engellemek(
dolgu: 12 piksel /* blok kenarlarından içeriğe dolgu - her tarafta 12 piksel olacak */
}

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

dolgu üst- üstte kenar boşlukları oluşturan bir özellik.
sağ dolgu- sağda alanlar oluşturan bir özellik.
alt dolgu- alt kenar boşlukları oluşturan özellik.
dolgu-sol- solda kenar boşlukları oluşturan bir özellik.

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

Fark ettiğiniz gibi bu şekilde 2 veya 3 taraftan alanlar belirtirseniz uzun bir kod alırsınız. Bunun için padding özelliğinin kısa bir gösterimi vardır. 4 değerin tümü sırayla gösterilir - her kenardan bir satırda, hareket yukarıdan başlayarak saat yönünde ilerler:

Dolgu: Üst Dolgu Sağ Dolgu Alt Dolgu Sol;

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

kenar boşluğu

Kenar boşluğu özelliği, dolgudan farklı olarak, öğelerin sınırları arasındaki dolgu miktarını ayarlar.
Öğe bir alt öğeyse, dolgu, öğenin sınırından ebeveynin kenarlığının iç kenarına kadar olan boşluktur.
Öğenin üst öğesi yoksa, girinti, özellik tarafından çevreleyen öğelerin kenarlığının kenarlarına ayarlanan boş alan olarak kabul edilir.

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

Yalnızca belirli kenarlardaki girintileri belirtmek için aşağıdaki özellikler mevcuttur:

kenar boşluğu- yukarıdan girintiler oluşturan bir özellik.
kenar-sağ- sağda girintiler oluşturan bir özellik.
kenar boşluğu-alt- aşağıdan girintiler oluşturan özellik.
kenar-sol- solda girintiler oluşturan bir özellik.

Padding özelliği gibi, margin de değerleri kestirme yeteneğine sahiptir. farklı partiler. Hareket, üst kenar boşluğundan saat yönünde gider:

Kenar Boşluğu: Üst Kenar Boşluğu Sağ Kenar Boşluğu Sol Alt Kenar Boşluğu;

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

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