CSS dolgusu. CSS'deki html'deki girintileri kontrol edin Html css'deki girintileri kontrol edin

Bir web kaynağı kullanıcılar tarafından dış çekiciliğine göre değerlendirilir. Bu nedenle bilgilendirici nitelikteki metinler bile kalitesiz olduğu için okunamayabilir. Sonuç - yalnızca site sayfalarının anlamsal içeriğine değil, aynı zamanda görsel temsiline de dikkatli ve dikkatli bir şekilde yaklaşmanız gerekir. CSS teknolojisinin ortaya çıkışı ilgi çekici makaleler oluşturma olanaklarını genişletti. Yazmayı okumayı kolaylaştırmak için tasarlanan özelliklerden biri CSS metin girintisidir.

Kenar boşlukları ve dolgu: fark nedir?

Metni biçimlendirmeye başlamadan önce kenar boşluklarının ve girintilerin ne olduğunu anlamalısınız. Bu işaretleme öğeleri bazı durumlarda kullanıcıya aynı görünse de aralarında temel farklılıklar vardır:

• alan özellik tarafından belirtilir dolgu malzemesi, girinti - marj;
• kenar boşluğu, içerik ile bloğun sınırı arasındaki boşluk, bitişik blokların sınırları arasındaki girinti ile belirlenir;
• Kenar boşlukları, öğenin boyutunda (genişlik ve yükseklik) dikkate alınabilir veya dikkate alınmayabilir.

marj özelliği

Bu nedenle, CSS metninin yatay veya dikey girintisini ayarlamak için yapıyı kullanın. marj. Bu özellik etiket için geçerlidir belgenin paragrafını tanımlar. En basit haliyle şu şekilde yazılır:

kenar boşluğu: 12 piksel.

Bu çizgi, bir metin bloğunun (veya başka herhangi bir bloğun) her taraftan 12 piksel girintili olacağı anlamına gelir. Aralığı örneğin üç kat artırmak için şunu yazmanız yeterlidir:

kenar boşluğu: 36 piksel.

Peki ya bloklar arasındaki boşluğun her iki tarafta da farklı olması gerekiyorsa? Web sayfası geliştiricileri çeşitli gösterim biçimleri kullanır:

1. kenar boşluğu: 11 piksel 22 piksel.
2. kenar boşluğu: 11 piksel 22 piksel 33 piksel.
3. kenar boşluğu: 11 piksel 22 piksel 33 piksel 44 piksel.

İlk örnekte bloğun alt ve üst kenarlarından 11 piksel, bloğun kenarlarından ise 22 piksel girintili olacaktır. İkinci yazım şekline göre bloğun üst kenarı ile içerik arasında 11 piksel, alt arasında 33 piksel, yanlarda ise 22 piksel olacaktır. Üçüncü durumda dolgu üstte 11 piksel, sağda 22 piksel, altta 33 piksel ve solda 44 piksel olacaktır.

Blok sınırına olan mesafeyi yalnızca bir tarafa kaydetmek de mümkündür: Kenar boşluğu üst, kenar boşluğu alt, kenar boşluğu sol, kenar boşluğu sağ. Mülklerin adlarını Rusçaya çevirdikten sonra amaçlarını tahmin etmek kolaydır. Örneğin, aşağıdaki giriş sağ kenar boşluğunun 22 piksel olacağını söylüyor:

sağ kenar boşluğu: 22 piksel.

Diğer taraflar için bloğun etrafındaki mesafelerin ana elemanın değerine eşit olduğu varsayılmaktadır.

Mülk marj Bir geliştiricinin CSS metin dikey girintisini kullanırken akılda tutması gereken bir özelliği vardır. Bitişik elemanların aralıkları toplanmaz, ancak üst üste bindirilir. Örneğin bloklardan birinin kenar boşluğu alt: 15 piksel ve onun altındaki blok üst kenar boşluğu: 35 piksel. Okul aritmetiği ve sağduyu, aralarındaki toplam alanın 50 piksel olacağını gösteriyor. Pratikte durum böyle değildir. Özellik değeri yüksek blok marj komşusunu “emecek”. Sonuç olarak öğeler arasındaki boşluk 35 piksel olacaktır.

"Kırmızı cizgi

Bir belgeyi bir metin düzenleyicide biçimlendirirken, kullanıcılar her yeni paragrafı "kırmızı" bir çizgi kullanarak belirtmeyi tercih eder. CSS'nin yardımıyla soldaki metni girintili hale getirmek kolaydır - yapı kullanılır metin girintisi. Bu şekilde yazılmıştır:

metin girintisi: 11 piksel.

Yani paragrafın ilk satırı sol kenara göre 11 piksel kaydırılacaktır. Bir web sayfasındaki metni düzenleyicideki bir belgeye daha çok benzetmek için ek olarak şunu ayarlamanız gerekir:

metin girintisi: 11 piksel;

metin hizalama: yasla.

Piksellere ek olarak, işaretleri açıklarken başka birimlerin (inç, nokta, yüzde) kullanılmasına izin verilir. Bloğun %10'luk bir CSS metin dolgusuna sahip olmasına izin verin. Blok genişliği 500 piksel olduğunda kırmızı çizgi 50 piksel olacaktır (500'ün %10'u).

Bu özellik şu şekilde ayarlanabilir: miras almak. Bu giriş, bloğun ana bloğun benzer bir özelliğini kullandığını söylüyor.

metin girintisi: devral.

Şaşırtıcı bir şekilde negatif değerler de alabilir! Bu durumda, sözde çıkıntılar oluşur, yani ana metin yerinde kalır ve ilk satır 22 piksel sola kaydırılır:

metin girintisi: -22 piksel.

Harflerin tarayıcının sol kenarlığının dışına çıkmasını önlemek için, ayrıca metin girintisi alanı ayarlamak için yapıyı kullanmanız gerekir:

sol dolgu: 22px.

CSS'nin temel özellikleri gözden geçirilir. Ve pratik onları pekiştirmeye yardımcı olacaktır. Öğrendiklerinizi web sitenizin geliştirilmesine uygulamak için bazı son ipuçları:

• kırmızı çizgi ve metin girintisi farklı kavramlardır ve bunları belirtmek için farklı özellikler kullanılır;
• Dikey girintiler için matematik kuralları geçerli değildir - aralıklar çakışır, değeri daha büyük olan öğe "kazanır";
• Negatif paragraf girintisi, bir resim kullanarak paragrafın ilk satırını belirtmek için kullanılır.

CSS girinti yönetimi özelliklerinin ortaya çıkışıyla birlikte, web geliştiricileri web sitesi sayfalarının arayüzünü ve tasarımını yönetme konusunda muazzam fırsatlara sahip. Önceden girintiler, çok daha karmaşık ve hacimli olan tablolar kullanılarak yönetiliyordu.

Devamsızlık yönetiminin temel özelliklerine bakalım.

Marj özelliğini kullanarak CSS kullanarak HTML'deki kenar boşluklarını yönetme

css özelliği marj tam olarak kontrol etmenizi sağlar dış kenar boşlukları. Diyelim ki dış kenar boşluklarını belirtmeniz gereken bir görüntü var: üstte 30 piksel, solda 20, sağda 10 ve altta 5 piksel.

Kenar boşluğunu en üstte ayarlamak için şunu yazacağız: marj-top: 30px

Sol kenar boşluğunu ayarlamak için: kenar boşluğu-sol: 30 piksel

Sağ kenar boşluğu: sağ kenar boşluğu: 10 piksel

Ve alt: kenar boşluğu-alt: 5 piksel

Aşağıdakileri yazarak her şeyi birleştirebilirsiniz: kenar boşluğu: 30px 10px 5px 20px;

Örneğin bir görüntü için bu dolguları ayarlayalım. Aşağıdaki html kodunu alıyoruz:

Görüntünün ana öğeye göre nasıl kaydığını görebilirsiniz.

Kenar boşluğu: 30 piksel girerseniz, css kenar boşlukları dört tarafta da aynı olacak ve 30 piksele eşit olacaktır.

Yemek yemek seçenekler talimatlar iki ve üç değer spesifikasyonda: kenar boşluğu: 10px 20px;. Bu parametre, css'deki dış kenar boşluklarının üstte ve altta 10 piksel, solda ve sağda 20 piksel görünmesini sağlayacaktır;

Çoğu zaman, başlangıç ​​​​düzen tasarımcıları için tüm olası kombinasyonları hemen hatırlamak her zaman mümkün değildir, bu nedenle ilk aşamalarda aşağıdaki parametreleri kullanabilirsiniz: kenar boşluğu üst, kenar boşluğu sağ, kenar boşluğu sol ve kenar boşluğu alt. Yukarıdan yukarıya, sağdan sağa, soldan sola, alttan aşağıya.

Görev

Madde işaretli veya numaralandırılmış listelerin etrafındaki dolguyu kaldırın.

Çözüm

Örnek 1'de gösterildiği gibi, liste türüne bağlı olarak UL veya OL seçici için boş değere sahip bir kenar boşluğu ve dolgu stili özelliği kullanın.

Örnek 1: Liste girintisi

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Çeburaşka
• Timsah Gena
• Şapoklyak

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

Pirinç. 1. Dikey ve yatay girintiler olmayan liste

Web sayfasının sol kenarında görünen liste işaretçilerinin kaybolduğuna dikkat edin. Listeyi sola taşımadan yalnızca üst ve alt kenar boşluklarını kaldırmak için, kenar boşluğu üst ve kenar boşluğu alt özelliklerini kullanın (örnek 2).

Örnek 2: Liste girintisi

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Çeburaşka
• Timsah Gena
• Şapoklyak

Blok düzeni genellikle bir web sitesi veya blog oluştururken kullanılır. Bunun bir sonucu olarak bloklara girinti eklemek çoğu zaman gerekli olur. Bu sebeple yaklaşık CSS'de girinti nasıl yapılır Bu derste ayrıntılı olarak anlatılmıştır. Tarayıcı için her etiket içerik, dolgu, dış kenar boşlukları ve kenarlığa sahip bir kaptır. Bu derste iç ve dış girintilerin nasıl oluşturulacağını öğreneceğiz ve bunların ana parametrelerini dikkate alacağız.

Aşağıdaki şekil blok girinti parametrelerini açıkça göstermektedir:

Gördüğünüz gibi girintiler dört yönde yapılabilir: üst girinti (üst), alt girinti (alt), sol girinti (sol) ve sağ girinti (sağ). Ölçü birimleri piksel, yüzde ve diğer CSS birimleri olabilir; bunlar hakkında daha fazla bilgi edinin. Bu eğitimde pikseller kullanılmaktadır.

Blok dolgusu

CSS'de dolgudan sorumlu özellik dolgu malzemesi. Şimdi bir blok için dahili dolguyu ayarlama örneğine bakalım:

üst dolgu: 5 piksel; /*top padding*/ padding-left: 8px; /*sol dolgu*/ dolgu-sağ: 8px; /*sağ dolgu*/ padding-bottom: 5px; /*alt dolgu*/

Bu örnekte, bloğun her bir tarafı için dolgu ayrı ayrı ayarlanmıştır. Ayrıca CSS'de girintiyi ayarlamanın birkaç yolu vardır:

kenar boşluğu: 5 piksel 8 piksel 5 piksel 8 piksel; /*üst, sağ, alt, sol kenar boşlukları*/ kenar boşluğu: 5px 8px 5px; /*üst, sol, sağ ve alt kenar boşluklarını tanımlar*/ kenar boşluğu: 5px 8px; /*üst ve alt, sağ ve sol kenar boşluklarını tanımlar*/ marj: 7px; /*7px'lik tüm dahili kenar boşluklarını tanımlar*/

İlk ve son yöntemleri hatırlamak daha kolaydır. İlk durumda, girintiler saat yönünde (üst, sağ, alt, sol) yerleştirilir - herhangi bir girinti miktarını belirtebiliriz; ikinci durumda, tüm kenarlardaki girintiler aynı olacaktır.

Kenar boşluklarını bloke et

CSS'deki kenar boşluklarından sorumlu olan özellik marj. CSS'deki kenar boşluklarına örnekler:

üst kenar boşluğu: 5 piksel; /*üst kenar boşluğu*/ kenar boşluğu-sol: 10 piksel; /*sol kenar boşluğu*/ sağ kenar boşluğu: 10 piksel; /*sağ kenar boşluğu*/ kenar boşluğu-alt: 5 piksel; /*alt kenar boşluğu*/

dolgu: 5 piksel 10 piksel 5 piksel 10 piksel; /*üst, sağ, alt, sol kenar boşlukları*/ padding: 5px 10px 5px; /*üst, sol ve sağ alt dolguyu tanımlar*/ dolgu: 5px 10px; /*üst ve alt, sağ ve sol dolguyu açıklar*/ padding: 7px; /*tüm 7 piksellik kenar boşluklarını açıklar*/

Böylece, CSS'de girinti nasıl yapılır- soru zor değil ama çok alakalı. Yukarıda açıklanan bilgileri daha iyi anlamak için iki özelliğin olduğunu hatırlamanız gerekir: dolgu - iç girintiler ve kenar boşluğu - dış girintiler. Ayrıca bildiğiniz gibi girintileri ayarlamanın birkaç yolu vardır, bunları kullanabilirsiniz.

Özellik, bir metin öğesinin ilk satırının başlangıcından önce ne kadar yatay metin alanının sarılması gerektiğini belirler. Boşluk, blok seviyesi için elemanın ve kabın başlangıç ​​kenarından hesaplanır.

Bir web sayfasının içeriğinin büyük bir kısmı metin biçiminde olduğundan, bu metni hem çekici hem de etkili bir şekilde biçimlendirme yeteneği, bir web tasarımcısı olmak için sahip olunması gereken önemli bir beceridir. Açıklama ve paragraf girintisi oluşturmak için en sık kullanılan ve önerilen yöntem CSS kullanmaktır. Burada CSS'nin metin ve girinti öğesi için nasıl kullanılabileceğine dair çeşitli örnekler sunulacaktır.

CSS kullanarak üst kenar boşluğunu ayarlayın

Üst kenar boşlukları oluşturmak için kesinlikle CSS özellikleri olmadan yapamayız, çünkü kenar boşluğuna ihtiyacımız var, bu, px ve standart olarak piksel, em, % vb. gibi farklı şekillerde ayarlanabilen bir değerdir, her şey gerçekleşir CSS stilistiklerinde ölçü birimleri cinsinden.

Kullanım örneği:

Marj bloğu(
kenar boşluğu üst:50 piksel;
}

Resimde görebilecekleriniz:

Bunu blokları düşürmek için de kullanabilirsiniz, burada adı verilen bir özelliği kullanabilirsiniz. kenar boşluğu-sol Ayrıca kenar boşluğu-sağ Ve kenar boşluğu-alt. Başlangıçta bunun için 4 parametre ayarlamanın mümkün olduğu marj özelliğini basitçe belirttiğimizde, burada üst taraftan başlayıp her bir tarafın altından devam ettiğimiz konsept için saat yönünde ele alacağız.

kenar boşluğu: 20 piksel 50 piksel 30 piksel 50 piksel;

CSS'de üst dolgu da var

Bir içerik öğesini dikey olarak hizalamanız gerekebilir, bu ana bloğa göredir, burada iç dolguyu varsayılan olarak yukarı doğru ayarlayan veya daha doğrusu ayarlayan padding-top gibi diğer özellikleri kullanmak mümkündür. Benzer şekilde yazılabilen ve ayarlanabilen benzer özelliklerden bahsedersek, burada px, em, % ve diğer birimlerde marjımız var.

Örnek:

Dolgu bloğu (
üst dolgu: 47 piksel;
}

Şimdi özelliğin bir analogunu düşünebiliriz marj Ve dolgu malzemesi blok öğesinin diğer taraflarına girintiler ayarlamak için kullanılır, ancak zaten ayrı olarak gider: sol dolgu, sağ dolgu, dolgulu alt. İhtiyacınız olan mesafeyi anında ayarlayabileceğiniz, yalnızca her taraf için ve her şeyin aynı anda olacağı yer.

dolgu: 10 piksel 20 piksel 40 piksel 50 piksel;

Burada başlangıçta değeri şu şekilde ayarlayabilirsiniz: marj Anladığınız gibi üstten başlıyoruz ama sonra her şey saat yönünde gidiyor, bu sağda, altta, solda vb.

Artık, farklı duruma bağlı olarak, özellikleri kullandığımız CSS stillerinin üst kısmını girintili hale getirme olanağına sahipsiniz. marj Ve dolgu malzemesiİnternet kaynağınızın sayfasında gerekli unsurları planladığınız ve yapmanız gerektiği gibi ayarlamanın mümkün olduğunu.