Açıklama

CSS özelliği margin-top, öğenin üstündeki dolguyu ayarlar. Dolgu, geçerli öğenin üst sınırının dış kenarından iç sınırına kadar olan mesafedir. ana öğe veya üstündeki öğenin sınırına. Satır içi öğeler için (ekran: satır içi;) yalnızca sol ve sağ taraftaki dolgunun ayarlanabileceğini unutmayın.

Dış üst dolgunun boyutu piksel (px), yüzde (%) veya diğer CSS birimleri olarak belirtilebilir. Değer pozitif veya negatif olabilir.

Not: Bir çocuğun alt veya üst dolgusu, sabit bir yükseklik boyutuna sahip değilse ebeveynin toplam boyunu etkileyebilir.

alanları birleştirme

1. Alt alta yer alan ve belge akışında yer alan kardeş alanları tek bir ortak alanda birleştirilir. Ortaya çıkan kenar boşluğunun yüksekliği, iki kenar boşluğundan daha büyük olanın yüksekliğine eşittir, örneğin: üst öğenin (kenar boşluğu-alt) kenar boşluğu 10 pikseldir ve alt öğenin (kenar boşluğu üst) 20 pikseldir, bu durumda tek kenar boşluğu 20 piksel yüksekliğinde olacaktır.
2. Belge akışında ebeveyn ve alt öğenin kenar boşluklarının birleştirilmesi, ebeveynin dış dolgusunu alt dolgudan (kenarlık, dolgu veya satır içi içerik) ayıracak hiçbir şeyi olmadığında gerçekleşir. Ayrıca, ana öğe gizli veya otomatik bir değerle taşma özelliğine ayarlanmışsa, alanların birleştirilmesi gerçekleşmez. Bu yöntemin avantajı, ana öğenin boyutunun artmamasıdır.

Bu yazımda sizlere nasıl doğru bir şekilde düzenleyeceğinizi anlatmak istiyorum. alanlar(dolgu) ve girinti(marj) CSS'de.

Öncelikle, W3C spesifikasyonuna göre kenar boşlukları ve dolguların tanımını hatırlayalım. Kutu modelinde kenar boşlukları, içerik ile kenarlık arasındaki mesafedir. Ve dolgu, bloğun sınırı ile bitişik veya ana öğenin sınırı arasındaki mesafedir.

Bu nedenle, elemanın kenarlığı ve arka planı ayarlanmamışsa, o zaman bir fark yoktur, dolguyu ayarlamak için padding veya margin özelliğini kullanın, ancak elemanın genişliği (genişlik) ve yüksekliği (yüksekliği) ayarlanmamışsa ve kutu boyutlandırma özelliklerini kullanarak içeriğin boyutunu hesaplamak için algoritma.

Her durumda, kenar boşluklarının öğenin genişliğine veya yüksekliğine dahil edilip edilmeyeceğini unutmayın. Kenar boşlukları her zaman öğenin dışında ayarlanır.

Şimdi, öğeler arasında kenar boşluklarını ve dolguyu nasıl düzgün yerleştireceğimize bakalım. Örnek olarak aşağıdaki bloğu alın.

Bu haber bloğu haberi. Bir başlık, bir haber listesi ve bir "Daha fazla haber" bağlantısından oluşur. Onlara şu sınıf adlarını verelim: news__title, news__list ve news__more-link.

Bu öğelerin her biri aynı sol ve sağ kenar boşluklarına sahip olduğundan, her öğe için ayrı ayrı sol ve sağ kenar boşlukları ayarlamak yerine kenar boşluklarını ana bloğa ayarlamak daha iyidir.

Haberler (dolgu: 20px 25px;)

Bu nedenle sağ ve soldaki alanların değerini değiştirmek gerekiyorsa bunun yapılması gerekecektir. Bir yerde... Haber bloğunun içine yeni bir öğe eklediğinizde, sol ve sağda zaten gerekli girintilere sahip olacaktır.

Genellikle, bir blok içindeki tüm öğelerin, örneğin arka plan nedeniyle hiç girintili olmaması gereken biri hariç, aynı sol ve sağ kenar boşluklarına sahip olduğu görülür. Bu durumda, öğe için negatif kenar boşlukları ayarlayabilirsiniz. O zaman, diğer öğeler için bloğun içindeki kenar boşluklarını kaldırmanız gerekmez.

Şimdi elemanlar arasında dikey boşluk ayarlamamız gerekiyor. Bunu yapmak için, öğelerden hangisinin olduğunu belirleyin. zorunlu... Açıkçası, bir haber listesi olmadan bir haber bloğu olamaz, aynı zamanda "Diğer haberler" bağlantısı olmayabilir, örneğin tasarım değiştirildiğinde başlık da kaldırılabilir.

Bunu dikkate alarak, başlık için alt girintiyi ve "Diğer haberler" bağlantısı için üst girintiyi belirledik.

News__title (alt kenar boşluğu: 10 piksel;) .news__more-bağlantı (üst kenar boşluğu: 12 piksel;)

Haber listesi için üst ve alt dolgu ekleyerek aynı dış etkiyi elde edebiliriz.

News__list (kenar boşluğu: 10px 0 12px 0;)

Şimdi ayrı haberler arasındaki girintileri ayarlamanız gerekiyor. Yine haber sayısının değişebileceğini ve listede sadece bir haber olabileceğini unutmayın.

Üstteki ilk girinti hariç her haber için veya alttaki son girinti hariç her haber için ayar yapabilirsiniz. İlk seçenek tercih edilir, çünkü: first-child sözde seçicisi CSS 2.1 belirtiminde eklenmiştir ve yalnızca CSS 3.0 belirtiminde eklenen: last-child sözde seçiciden daha geniş bir desteğe sahiptir.

News__list-item (üst kenar boşluğu: 18px;) .news__list-item: first-child (en üst kenar boşluğu: 0;)

Böylece, doğru yerleştirme kenar boşlukları ve girintiler esnek bir şekilde değiştirmenize olanak tanır dış görünüş stilleri değiştirmeden ve tasarımı bozmadan herhangi bir blok. En önemli şey, bloğun hangi öğelerinin ana öğeler olduğunu belirlemektir ( zorunlu), ve hangisi isteğe bağlı.

Bazen gerekli unsurlara güvenemeyiz. Örneğin, içinde bazı başlık ve metinlerin görüntülenebileceği bir açılır penceremiz var. Ayrıca bazı durumlarda metin olmayabilir, bazı durumlarda başlık olmayabilir. Yani, her iki öğe de isteğe bağlıdır.

Bu durumda, girintileri ayarlamak için aşağıdaki yolu kullanabilirsiniz.

Popup__header + .popup__text (üst kenar boşluğu: 15px;)

Ardından girinti, yalnızca her iki öğe de kullanılacaksa görünecektir. Yalnızca başlığın veya yalnızca metnin görüntülenmesi durumunda, fazladan girinti olmayacaktır.

Düşen dikey dolgu

Herkesin bilmediği başka bir nüans, bitişik bloklar arasındaki dikey girintilerle ilişkilidir. Yukarıda verdiğim girinti tanımında girintinin aradaki mesafe olduğu yazıyor. sınırlar mevcut ve bitişik blok. Böylece iki bloğu alt alta yerleştirip birine 30px alt kenar boşluğu, diğer 20px üst kenar boşluğu verirsek, aralarındaki boşluk 50px değil 30px olacaktır.

Yani, girintiler örtüşecek ve bloklar arasındaki girinti, girintilerin toplamına değil, en büyük girintiye eşit olacaktır. Bu etkiye "çöküş" de denir.

Dikey girintilerin aksine yatay girintilerin daraltılmadığını, özetlendiğini lütfen unutmayın. Alanlar (dolgu) da özetlenmiştir.

"Çöken" dolguyu bilerek, bu özelliği kendi avantajımıza kullanabiliriz. Örneğin, makalenin içine başlıklar ve metinler için girinti koymamız gerekiyorsa, o zaman ilk seviyenin başlığı için girintiyi en altta 20px ve ikinci seviyenin başlığını üstte 20px olarak ayarlayacağız ve alt 10 pikselde ve tüm paragraflar için girintiyi üst 10 pikselde ayarlayacağız.

H1 (alt kenar boşluğu: 24 piksel;) h2 (üst kenar boşluğu: 24 piksel; kenar boşluğu alt: 12 piksel;) p (üst kenar boşluğu: 12 piksel;)

Artık h2 başlığı, h1 başlığından sonra veya paragraftan sonra yerleştirilebilir. Her durumda, üst kenar boşluğu 24 pikseli geçmeyecektir.

Genel kurallar

Özetlemek gerekirse, kenar boşlukları ve dolgu koyarken izlediğim kuralları sıralamak istiyorum.

1. Bitişik öğeler aynı dolguya sahipse, bunları öğelere değil ana kapsayıcıya ayarlamak daha iyidir.
2. Öğeler arasındaki boşluğu ayarlarken, bunun gerekli bir öğe mi yoksa isteğe bağlı bir öğe mi olduğunu dikkate almalısınız.
3. Aynı türdeki öğelerin bir listesi için - öğelerin sayısının değişebileceğini unutmayın.
4. Dikey dolgunun farkında olun ve bu özelliği yararlı olduğu yerlerde kullanın.

Anya aşağıdaki kodu yazdı (örnek 1) ve Şekil 1'de gösterilen sayfayı aldı. 1. Ancak Anya'nın bloklar arasında ve blokların sağında ve solunda girintiye ihtiyacı yoktur. Bunun için kodda ne gibi değişiklikler gerekiyor?

Başlık ile ana metin arasında çok fazla girinti var, nasıl küçültebilirim?

Paragrafa (etiket

) ve başlık (etiket

) otomatik olarak üst ve alt dolgu ekler, bu da başlık ile metin arasında geniş bir boşluk bırakacak şekilde toplanır. Doldurma miktarını azaltmak için, margin-bottom özelliğini H1 seçicisine açıkça eklemeniz gerekir. Ayrıca pozitif, sıfır veya negatif bir değer belirleyebilirsiniz. Bu şekilde istenilen girinti değerini ayarlamak kolaydır.

Her paragrafın ilk satırına nasıl girinti koyarım?

Paragraf girintisini ayarlamanız gerektiğinde, text-indent style özelliğini kullanmak en iyisidir. Değeri, ilk satırın metninin orijinal konumunun sağına ne kadar kaydırılacağını belirler. Bu durumda, metin bloğunun genişliği değişmez ve başlangıçta ayarlanmış olarak kalır. Girinti miktarı piksel, yüzde veya diğer kullanılabilir birimler olarak belirtilebilir (örnek 1).

Listeden üst ve alt girinti nasıl kaldırılır?

Liste türüne bağlı olarak UL veya OL seçici için kenar boşluğu-üst ve kenar boşluğu-alt stil özelliğini kullanın. Genel kenar boşluğu özelliğini de kullanabilirsiniz.

Bir web sayfasındaki girintiyi nasıl değiştiririm?

Web sayfasındaki dolgu, görünür olmasa da, içeriğin rahat bir okuma için tarayıcı penceresinin kenarlarına tam olarak oturmasına izin vermez. Gövde seçicinin kenar boşluğu özelliğini değiştirerek kendi kenar boşluğunuzu ayarlayabilirsiniz.

Bir formun etrafındaki dolguyu nasıl kaldırırım?

Etiket yoluyla form eklerken

dolgu otomatik olarak üstte ve altta etrafına eklenir. Bunları kaldırmak için, FORM seçicisine ekleyerek null yapılabilir kenar boşluğu stili özelliğini kullanın.

Metin paragrafları arasındaki boşluğu nasıl değiştiririm?

etiketi kullanırken

Girintiler, metin paragrafının üstüne ve altına otomatik olarak eklenir. Bu, bir metin bloğunu diğerinden görsel olarak ayırmak için yapılır. Varsayılan girinti değerlerinin her zaman tatmin edici olmadığı açıktır, bu nedenle bazen azaltılması veya arttırılması gerekir. Bunu yapmak için, evrensel özellik kenar boşluğunu kullanabilirsiniz, paragrafın tüm kenarlarındaki girintileri veya üst girinti için kenar boşluğu üstünü ve alt girinti için kenar boşluğu-altını tanımlar.

Bugün sizinle biraz düzen ilkeleri hakkında konuşacağız, yani sitenizdeki belirli öğelerin girintilerini nasıl düzenleyeceğiniz.

Girinti yapılacak söz konusu öğe metin, resim, tablo veya başka herhangi bir HTML öğesi olabilir. Ana şey, şimdi size anlatacağım bazı önemli kurallara uymaktır.

Sitenizi yeni oluşturuyorsanız, ana stil dosyanızın en üstüne aşağıdaki özellikleri eklemenizi öneririm:

* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;) *: önce, *: sonra (-webkit-box-sizing: border- kutu; -moz-box-sizing: border-box; box-sizing: border-box;)

Buna neden ihtiyacın var, soruyorsun? Sorunuza açıklayıcı bir örnekle cevap veriyorum.

Diyelim ki şöyle bir düzen öğeniz var:

Selam Dünya!

Seçenek, yukarıda açıklanan özellikleri (üst öğe) ve bunları (alt öğe) kullanmadan nasıl görünecek:

Burada ne görebilirsin? İlk versiyondaki (özellikler kullanılmadan) elemanın genişliğinin, yerleşim açısından tamamen uygun ve doğru olmayan eklenen dolgu nedeniyle belirtilenden daha büyük olması.

Özellikleri olan seçenek çok daha estetiktir, ancak bilinçli kullanmaya değer, çünkü bunları hazır bir siteye eklediğinizde, kötü bir tasarım ve tüm bunları uygun hale getirme şeklinde bir "baş ağrısı" alma riskini alırsınız. biçim. Sıfırdan yönetme şansına sahip olduğum tüm projeler bu özelliklerden yoksun değildi.

Ve şimdi, aslında, sitenizdeki öğelerin girintisini açıklayıcı örneklerle düzenleme seçenekleri hakkında konuşalım.

"Doldurma" CSS özelliğiyle doldurma

Olayların tüm mantığını anlamanız için örnek olarak aşağıdaki düzen parçacığını ele alalım:

Selam Dünya!

Selam Dünya!

tarzları ile:

Test_div (genişlik: 250 piksel; kenarlık: 1 piksel katı;)

Görsel versiyonu aşağıdaki gibidir:

mal nedir" dolgu malzemesi"? Belirtilen öğeler üzerinde dolgu düzenlemeye yardımcı olur. Düzenimize 10 piksellik bir dolgu ekleyelim:

Test_div (genişlik: 250 piksel; kenarlık: 1 piksel katı; dolgu: 10 piksel; // Dolgu 10 piksel)

Görsel olarak, şöyle çıkıyor:

Özellikteki 10 sayısı, dört kenarının her birinde belirtilen öğelerin içine 10 piksellik bir dolgu eklenmesi gerektiği anlamına gelir. Pikseller (px), yüzdeler veya desteklenen diğer herhangi bir CSS değeri ile değiştirilebilir.

Toplamda iki seçenek var girintili tarafların göstergeleri.

Öncelikle- bu, tarafların açık bir göstergesi ile:

Üst dolgu: 10 piksel; // üst dolguda 10 piksel dolgu-sağ: 10 piksel; // 10px sağ dolgu-alt için dolgu: 10px; // Alt dolgu 10px dolgu-sol: 10px; // 10 piksel sola dolgu

Bu durumda, her iki taraf da kendi özelliğini kullanır. VE ikinci:

Dolgu: 10px 0 0 0; // Üstte 10 piksel dolgu, diğer her şey 0 piksel dolgu: 10 piksel 0; // 10px üst ve alt dolgu ve yanlarda 0px dolgu: 0 10px; // Üstte ve altta 0 piksel dolgu ve yanlarda 10 piksel

Burada, her biri kendi tarafına karşılık gelen basit bir değerler listesi geliyor. Kenarlar böyle ayarlandı: ilk değer üst, ikincisi sağ, üçüncüsü alt ve dördüncüsü sol, yani her şey saat yönünde.

İki değer varsa (üst ve sağ), o zaman bu, aynı değerlerin aşağı ve sola yansıtıldığı ve yalnızca bu şekilde olduğu anlamına gelir. Her şey açık görünüyor. Bazı kenarlar için girintiyi ayarlamanız gerekmiyorsa, bu kenar için değeri "0" olarak ayarlayın. Daha kompakt olduğu için bu seçeneği daha çok seviyorum, ancak çabalarımda ilk seçeneği kullandım.

Bu girinti türü, metni, tablo hücresi içeriğini ve diğer metin bilgilerini ayırmak için iyidir. Yukarıdaki örnekte olduğu gibi öğelerin kendilerini ayırmak için başka bir özellik daha vardır.

CSS "margin" özelliğiyle doldurma

Mülkün ayırt edici bir özelliği " kenar boşluğu"Dolgu, öğenin dışına, yani harici olarak eklenir.

Buraya eklemek için de iki seçenek vardır.

Öncelikle- Tarafın açık bir göstergesi ile:

Üst kenar boşluğu: 10 piksel; // sağ üst kenar boşluğundan 10 piksel dolgu: 10 piksel; // sağ kenar boşluğuna 10px dış dolgu-alt: 10px; // Alt dolgu 10px sol kenar boşluğu: 10px; // 10 piksel sola dolgu

İkinci- her biri kendi tarafına karşılık gelen bir değerler listesi ile:

Marj: 10px 0 0 0; // 10px üst kenar boşluğu, diğer her şey 0px kenar boşluğudur: 10px 0; // Üstte ve altta 10px dolgu ve kenarlarda 0px: 0 10px; // Dış dolgu üstte ve altta 0 piksel ve yanlarda 10 pikseldir

Burada kurallarla çalışmanın tüm nüanslarını anlatmayacağım, mülkle ilgili her şey aynı” dolgu malzemesi», Bu konuda yukarıda yazılmıştır.

Marjı aşağıdaki değerle kullanırız:

Test_div (genişlik: 250 piksel; kenarlık: 1 piksel katı; kenar boşluğu: 10 piksel; // Dolgu 10 piksel)

Görsel olarak şöyle görünecek:

Örnekte görebileceğiniz gibi, bu durumda, belirtilen öğeleri ayıran harici bir dolgu eklenir.

Önemli özellik: sonuca yakından bakarsanız, öğelerin bitişik dolgusunun özetlenmediğini fark etmiş olabilirsiniz. Diğer bir deyişle, ilk öğenin 10 piksellik bir dış alt dolgusu varsa ve ikincisinin aynı değerde bir dış üst dolgusu varsa, aralarındaki toplam mesafe de 10 piksel olacaktır. Sırasıyla 10 ve 15 ise, toplam 15'tir, vb.

Bu tür girinti genellikle metinde, yani paragrafların tasarımında ve ayrıca görünür sınırları olan öğelerde kullanılır.

Ancak her iki özellik de sadece bu unsurlarla sınırlı değildir. Bunları kullanmak için seçenekleri kendiniz seçersiniz, ben sadece size onlar hakkında bir temel vermeye çalıştım.