Sheet Hile: Metin CSS girinti nasıl

görsel çekiciliği için kullanıcılar tarafından değerli Web kaynak. Bu nedenle, hatta yararlı metin bilgileri nedeniyle bu kötü tasarlanmış gerçeğine okunamaz. Sonuç - dikkatli ve özenli sayfaların anlamsal içeriğe değil, aynı zamanda görsel sunum için sadece gerekir. CSS teknolojisinin gelişiyle çekici makaleler oluşturma olasılığını artırmıştır. girinti CSS metin - yazılı algısını kolaylaştırma amaçlı özelliklerinden biri.

Marjı ve doldurma: fark nedir?

Metni biçimlendirmek için başlamadan önce, ne marjları ve dolgu anlamalıdır. bazı durumlarda bu biçimlendirme elemanları kullanıcıya aynı görünüme rağmen, aralarındaki temel farklar vardır:

• saha dolgu özelliği, girinti ayarlar - marjı;
• alan içeriği ve blok sınırı, bir boşluk arasında bir boşluk ile belirlenir - bitişik blok sınırları arasında;
• alan bir boyutta elemanı (genişlik ve yükseklik) ve hiçbir şekilde kabul edilebilir.

marj özelliği

Yani, yatay veya dikey dolgu CSS metnini ayarlamak tasarım marjı kullanmak. Bu özellik etiketi

paragraf ana belge için geçerlidir. En basit durumda, şu şekilde yazılabilir:

margin: 12px.

Bu hat her tarafta metin (ya da başka bir blokta) bir blok çentiğe 12 piksel yerleştirilmiş olduğu anlamına gelir. aralığını artırmak için, örneğin, üç kez yazmak için yeterlidir:

margin: 36px.

Ama ya aralığının bloklar arasındaki her tarafında farklı olsun? Web geliştiricileri kayıtlarının çeşitli biçimlerde kullanılmaktadır:

1. margin: 11px 22px.
2. margin: 11px 22px 33px.
3. margin: 11px 22px 33px 44px.

22 piksel - İlk örnekte, girinti 11 piksel bloğunun iki tarafta, bloğun alt ve üst sınırları yapılır. her bir yanı üzerinde 33 piksel - -, üst kenar ve içerik arasında, ikinci kayıt birimine göre daha düşük arasında, 11 piksel olur 22 piksel. Üçüncü vaka CSS girinti metninde üstten 11 piksel, sağ taraf 22 piksel, 33 piksel ve alt soldan 44 piksel değerine sahip olacaktır.

margin-top, margin-bottom: Ayrıca kullanılabilen tek bir tarafta blok sınırına kadar olan mesafeyi kaydetmek için yeteneğidir , margin-left, margin-right. Rus dilinde özelliklerinin isimleri çevirme, onların randevu hakkında tahmin etmek kolaydır. Örneğin, aşağıdaki giriş sağdaki girinti 22 piksel eşit olacağını belirtir:

margin-right: 22rh.

kabul bloğun tarafı etrafında kalan mesafe için ana elemanının değerine eşit olacak şekilde.

Marj tesiste geliştirici dikey CSS metin girintili kullanırken unutmamanız gereken özelliklere sahiptir. bitişik elemanların aralıkları toplanır ve her bir diğer üst üste gelmez. 15 piksel ve komşu blok marj üst altında: Örneğin, birim, bir marj-alt sahip olduğunu varsayalım 35px. Okul aritmetik ve sağduyu aralarında toplam aralık 50 piksel olacağını belirler. Pratikte öyle değil. mülkiyet marjı «kırlangıç" komşusuyla büyük bir değere sahip bir blok. Bunun bir sonucu olarak, elemanlar arasındaki aralık 35 pikseldir.

"Kırmızı" çizgi

Bir metin editörü belge yapma, kullanıcılar "kırmızı" çizgi ile her yeni paragraf sormak tercih ederim. Kullanım text-indent tasarım - Soldaki CSS metin girinti kullanma yapmak kolaydır. şöyle Yazılı:

text-indent: 11px.

Bu paragrafın ilk satırı 11 piksel sol kenar boşluğuna göre kaydırılabilir olmasıdır. baktım daha düzenleyicide bir belgeye gibi web sayfasında metin yapmak için, yani yazma ek bir gerekçe yüklemelisiniz:

text-indent: 11px;

text-align: haklı.

piksel ek olarak, diğer biçimlendirme birimleri kullanılması tarifnamede - inç civarında iddia etmektedir. Birim% 10 CSS metin girinti vardır edelim. 500 piksellik blok genişliği, kırmızı çizgi 50 piksel (500% 10) olacak zaman.

Bu özellik için değer kaynaklanan devralma sergilenecektir. Bu kayıt birimi üst birimin benzer özelliğini kullanır söylüyor.

text-indent: devralır.

Şaşırtıcı bir şekilde, girinti negatif değerler alabilir! Bu durumda, projeksiyonlar sözde tarafından oluşturulur, bu temel metin yerinde kalır ve ilk satırı 22 piksel sola kaydırılır geçerli:

text-indent: -22px.

harfler alanın yapısını tanımlamak için kullanılması gereken text-indent ek olarak, tarayıcının sol sınırdan geçirilen değildir:

padding-left: 22px.

yararlı ipuçları

için CSS temel özelliklerini metin biçimlendirme kabul edilir. Ve onlara yardım pratiğini düzeltin. Burada web geliştirme öğrenilen malzemeyi uygulamak için nasıl bir kaç nihai ipuçları verilmiştir:

• Kırmızı çizgi ve metin girinti - Farklı kavramlar ve bunların rehberlik için kullanılan farklı özelliklerde;
• Dikey girinti kuralları matematik geçerli değildir - aralıkların çakışmaması, daha büyük değere sahip eleman "kazanır";
• Negatif girinti görüntüleriyle ilgili paragrafın ilk satırını belirtmek için kullanılır.