HTML CSS'sinde girintiler. CSS Girinti: İçerik Konumlandırma

Bir öğe veya düzen oluştururken, bir girintili yatay yaratmamız gerekiyor, böylece birbirine göre. Bloklar veya çeşitli elemanlar gibi olabilir veya daha doğrusu, yatay olarak bulunan bloklar arasında başlangıçta belirtilen bir mesafe yapmaktır. Tasarım öğelerinde girintileri oluşturmanın farklı yolları vardır. Bununla birlikte, burada birden fazla modern tarayıcılarla uyumluluk için, sayfadaki metin veya blok olarak geri çekilmek için güncel bir konuya dokunacağız.

Mülkiyet, metin öğesinin ilk satırından önce ne kadar yatay metin alanının aktarılacağı belirler. Aralık, elemandan kenardan ve blok seviyesi kabından hesaplanır.

Web sayfasının çoğu bir metin olarak temsil edildiğinden, bu metni stilize etme yeteneği hem çekici hem de verimlidir, web tasarımcısı olabilecek önemli bir beceridir. Bir girinti açıklaması ve paragraf oluşturmak için, en yaygın kullanılan ve önerilen yöntem CSS'yi kullanacaktır. Burada, CSS'nin metin ve girinti öğesi için nasıl kullanılabileceği çeşitli örneklerle birlikte verileceksiniz.

CSS'de yukarıdan harici bir girinti ayarlayın

Üst girintileri oluşturmak için, kesinlikle CSS özellikleri olmadan yapamaz, çünkü marjı üstüne ihtiyacımız var, bu değer PX ve Standard'da piksel, em,% vb. İle ilgili olarak farklı şekilde belirtilebilir. birimler ölçümü.

Kullanım Örneği:

Marj bloğu (
Marj-Top: 50px;
}

Görüntüye ne bakabilirim:

Blokları yükseltmek için de kullanabilirsiniz, burada denilen bir özellik kullanabilirsiniz. kenar boşluğu. Ayrıca kenar boşluğu ve kenar boşluğu. Başlangıçta 4 parametre belirlemenin mümkün olduğu Marj özelliğini belirlediğimiz yer, burada her iki tarafın devamı ile üst tarafından başladığımız konsept için saat yönünde saat yönünde görüneceğiz.

marj: 20px 50px 30px 50px;

Bu böyle çalışacak marj.: Yukarıdan sağa soldan sağa:

Ayrıca Yukarıdan CSS'de bir iç girinti var.

Dikey içeriğin içeriğini hizalamanın gerekli olması gerektiğinden, bu, ana bloğa göre, diğer özellikleri, varsayılan olarak, dahili girintiyi arttırır, bu da doldurma üstü olarak kullanmak için bir fırsat var. . Benzer özellikler hakkında konuşursak, ayrıca reçete edilebilir ve analog olarak ayarlanabilir, daha sonra marj burada PX, EM,% ve diğer birimlerde gider.

Misal:

Dolgu bloğu (
Dolgu-Top: 47px;
}

Örneğe bakıyoruz:

Şimdi analog mülkü düşünebilirsiniz marj. ve dolgu malzemesiBlok elemanının diğer taraflarından girintilerin görevinde yer alan, ancak zaten ayrı olarak gelir: dolgu-sol., dolgu-sağ, dolgu-alt. Hemen ihtiyacınız olan mesafeye, yalnızca her taraf için ihtiyacınız olan ve her şey aynı anda olacak.

dolgu: 10px 20px 40px 50px;

Burada başlangıçta değerini olarak ayarlayabilirsiniz. marj. Yukarıdan anladığınız gibi başlayarak, ancak daha sonra her şey saat yönünde gider, sağa doğru, alttan solda vb.

Şimdi farklı duruma bağlı olarak, özellikleri kullandığımız CSS stillerinde yukarıdan girintileri yapma fırsatınız var. marj. ve dolgu malzemesiİnternet kaynağınızın sayfasında gerekli maddeleri, düşündüğünüz gibi ayarlamak mümkündür ve yapmanız gerekir.

Açıklama

Geri çekilme büyüklüğünü elemanın sağ kenarından ayarlar. Bir girinti, mevcut elemanın sağ sınırının dış kenarından ana elemanının iç sınırına olan mesafedir (Şekil 1).

Sözdizimi

marj-sağ: Değer | Otomatik | kalıtım.

Değerler

Sağ emeklinin değeri, piksellerde (PX), yüzde (%) veya CSS için izin verilen diğer birimler halinde gösterilebilir. Değer hem olumlu hem de olumsuz olabilir.

Otomatik, girintilerin boyutunun tarayıcı tarafından otomatik olarak hesaplanacağını gösterir. Devralma ebeveyn değerini devralır.

HTML5 CSS2.1 IE CR OP SA FX

Bu örneğin sonucu Şekil 2'de gösterilmiştir. 2.

İncir. 2. Marjı sağ özelliğin uygulanması

Nesne modeli

belge.getElementbyid ("Elementid") .style.margunright

Tarayıcılar

Internet Explorer 6 tarayıcı, ana elemanlara yatırılan yüzer öğeler için sola veya sağ girintinin değerini iki katına çıkarır. Ebeveynin yanına bitişik olan girinti inding. Sorun genellikle ekran ekleyerek çözülür: Yüzer bir eleman için satır içi.

Sürüm 7.0 sürümünden önce Internet Explorer, miras değerini desteklemiyor.

Bloguma selamlar. CSS (Cascade Style Tabloları), web sayfalarının görünümünü yapılandırmak için birçok fırsat sunar. Bugün, CSS'de nasıl bir girinti ile herhangi bir eleman için başka bir tarafta bir girinti nasıl belirleneceğini hemen hemen göstermek istiyorum.

Harici girinti

Harici girinti, Marj özelliğini kullanarak ayarlanır. Bununla birlikte, girintileri bir kerede dört taraftan ayarlayabilir veya diğer özellikleri kullanabilirsiniz: Marj-Top, Marj-Sol, Marj-sağ, Marj-alt, bu da yalnızca bir yandan yapmanızı sağlar.

Harici girinti, öğenin seçilen kenarı, sayfadaki diğer elemanlardan uzaklaştırılacağı mesafeyi belirler. Örneğin, yazın:

P, div (
Marj-Top: 20px;
}

Bu, tüm blokların ve paragrafların 20 pikselin en üstüne girmesi gerektiği anlamına gelir, yani üst kenarları buna bitişik elemanlardan uzaklaşacaktır.

Girintiler, her iki tarafta, yalnızca aynı kenar boşluğu özelliğiyle kaydedilebilir, bu da üst üste 4 değer kaydeder:

Div (
Marj: 20px 10px 20px 10px;
}

Girintiler sırasıyla üst, sağ, alt ve sol kenarlardan verilecektir. Bu durumda bu durumda karşı taraflardan eşitler, o zaman böyle yazmak mümkün olacaktır:

Div (
Marj: 20px 10px;
}

İlk değer, yukarıdaki ve alttan ve ikincisinin yanlarında girintidir.

İç girintili

Dahili girinti farklı çalışır - bloğu diğer elemanlardan hareket ettirmez ve bu mesafeyi elemanın içine ekler, içeriğin içeriğini (içeriği) kenarlarından hareket ettirir. O konforlu. Metnin pencerenin sağ üst kenarında başladığı siteyi nerede gördünüz?

Bunu görmedim çünkü web geliştiricileri her zaman harici ve iç girintileri uyguladı, böylece metin mümkün olduğunca uygun olacak şekilde. İç girintiler, 4 değerin, sırasıyla tüm kenarlara tüm kenarlara transfer edilebileceği dolgu özelliği kullanılarak yazılır.

Ayrıca marj'a benzer aynı zamanda başlık tarafını ekleyebilir ve sadece bunun için mesafeyi ayarlayabilir. Örneğin, yukarıdaki girinti, doldurma üstü kullanılarak yazılabilir. Genel olarak, dolgu özelliği, marj özelliğine tamamen benzer şekilde çalışır.

Örneğin, böyle bir kod parçasını alamazsınız:

Blok (
Genişlik: 200px;
Dolgu: 20px;
}

Sence elemanımızın gerçek genişliği olacak? Bunun 200 piksel olduğunu gösterir, ancak her iki tarafta 20, toplam 240 piksel için yanlarda paddingler eklenir. Düzen olduğunda bunu düşünün.

Ayrıca, dolgunun normalde yalnızca blok elemanları tarafından ayarlandığını, vermemek daha iyi olduğunu not etmek ister. Marj normalde herhangi bir elemanla çalışır.

Günümüzde sizinle, sitenizde belirli unsurlarda bir girinti düzenlemenin yolları hakkında, sizinle bir miktar konuşacağız.

Göz önünde bulundurulan eleman olarak, bir girinti yapması gereken, metin, görüntü, tablo veya başka bir HTML öğesi olabilir. Asıl şey şimdi söyleyeceğim bazı önemli kuralları takip etmektir.

Sadece sitenizi oluşturuyorsanız, ana stil dosyanızın üst kısmında sizi öneririz Aşağıdaki özellikleri ekleyin:

* (-Webkit-Box-Boyutlandırma: sınır kutusu; -moz-kutu boyutlandırma: sınır kutusu; kutu boyutlandırma: sınır kutusu;) *: Önce, *: Sonra (-Webkit-box boyutlandırma: Sınır Kutu; -moz-kutu boyutlandırma: sınır kutusu; kutu boyutlandırma: sınır kutusu;)

Neden ihtiyacın var, sordun mu? Sorunuzu görsel bir örnekle cevaplıyorum.

Diyelim ki böyle bir yerleşim elemanınız var:

Bu, yukarıda (üst eleman) ve kullanımlarıyla (alt öğe) açıklanan özellikleri kullanmadan bir seçenek gibi görünecektir:

Burada ne görülüyor? İlk versiyondaki elemanın genişliğinin (özelliklerin kullanımı olmadan), katma girinti ile daha uygun olmayan ve düzgün olmayan, düzeyde uygun ve doğru olmayan daha fazla gösterilmiştir.

Özellikler ile olan seçenek çok daha estetik olarak, ancak kullanmak için bilinçli bir şekilde, çünkü bunları hazır web sitesine eklerken, bir sürüş tasarımı ve "baş ağrısı" riski alırsınız. Sıfırdan olduğum tüm projeler bu özellikler olmadan maliyetli değildi.

Ve şimdi, aslında, sitenizdeki girintileri görsel örneklerle olan eşyalardan organize etme seçenekleri hakkında konuşalım.

CSS özellikleri ile iç girintili "dolgu"

Böylece, şeylerin tüm mantığını anlarsanız, örneğin düzenin aşağıdaki fragmanını alın:

stillerinizle:

TEST_DIV (genişlik: 250px; sınır: 1px katı;)

Görsel sürüm elde edilir:

Mülk nedir " dolgu malzemesi"? Belirtilen öğelerde bir iç girintiyi düzenlemeye yardımcı olur. Düzenimize 10px'e eşit bir iç girintiye ekleyin:

TEST_DIV (genişlik: 250px; sınır: 1px katı; dolgu: 10px; // dahili girinti 10px)

Görsel olarak böyle ortaya çıkıyor:

Mülkteki 10 numara, belirtilen elemanların içinde dört tarafı ile birlikte 10px'e eşit bir girinti eklemek için gerekli olduğunu göstermektedir. Piksel (PX), CSS'de desteklenen faiz veya diğer değerlerle değiştirilebilir.

İki seçenek var. Girintileri yapmanın gerekli olduğu tarafların endikasyonları.

İlk - Bu, tarafları açıkça gösteriyor:

Dolgu-top: 10px; // yukarıdaki doldurma sağından 10px İçeriğin 10px'si: 10px; // dahili girinti 10px sağ dolgu tabanını: 10px; // dahili girinti 10px alt dolgu solu: 10px; // dahili girinti 10px sol

Bu durumda, her bölüm mülkünü kullanır. VE ikinci:

Dolgu: 10px 0 0 0; // yukarıdan 10px dahili girinti 10px, her şey - 0px dolgu: 10px 0; // Üst ve altta ve altındaki iç girintili 10 piksel ve yanlarda - 0px dolgu: 0 10px; // yukarıdan ve aşağıdan ve yanlarında - 10px'ten 0px dahili girinti

Her biri tarafına karşılık gelen basit bir değerlerin bir listesi var. Taraflar ayarlandı: İlk değer, ikinci, ikinci - sağ, üçüncüsü alt ve dördüncü - sol, yani, her şey saat yönündedir.

Değerler iki (üst ve sağ) ise, aynı değerlerin aynasının aşağı ve sola döndüğü anlamına gelir. Her şey açık görünüyor. Bazı kenarlardan bazıları için bir girinti sormanız gerekmezse - bu tarafın değeri "0" olarak ayarlanır. Daha kompakt olduğu için bu seçeneği daha çok seviyorum, ancak girişimlerimde tam olarak ilk seçenek kullandım.

Bu tür bir girinti, metni, tabloların içeriğini ve diğer metin bilgilerini bölmek için uygundur. Öğeleri kendilerini yukarıdaki örnekte, başka bir özellik olduğu gerçeğine benzer şekilde ayırmak için.

CSS özellikleri "Marj" yardımı ile harici girinti

Mülkiyetin ayırt edici özelliği " marj."- Bu, elemanın dışına bir girinti, yani, harici.

Buraya eklemek için seçenekler de iki.

İlk - Tarafların net bir göstergesi ile:

Marj-Top: 10px; // Yukarıdaki harici girinti 10px kenar boşluğu sağ: 10px; // kenar boşluğu sağındaki harici girinti 10px: 10px; // AŞAĞIDAKİ ENDÜSTRİSAL SARDENT 10PX AŞAĞIDAKİ BAĞLANTISI SOL: 10PX; // harici girinti 10px sol

İkinci - Her biri tarafına karşılık gelen değerlerin listesi ile:

Marj: 10px 0 0 0; // yukarıdan harici girinti 10px, her şey - 0px kenar boşluğu: 10px 0; // Üst ve altta ve yanlarda 10 piksel 10px - 0px kenar boşluğu: 0 10px; // yukarıdan ve aşağıdan ve yanlarda - 10px

Burada, kurallarla çalışmanın tüm nüanslarını tarif etmeyeceğim, her şey mülkle aynıdır. dolgu malzemesi"Yukarıda yazılmış.

Aşağıdaki değerle marj kullanın:

TEST_DIV (genişlik: 250px; sınır: 1px katı; kenar boşluğu: 10px; // harici girinti 10px)

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

Örnekten de görülebileceği gibi, bu durumda belirtilen elemanları kendi aralarında ayrılarak harici bir girinti eklenir.

Önemli özellik: Sonuca dikkatlice bakarsanız, elemanlardan bitişik girintilerin özetlenmemesini fark edebilir. Yani, birinci elemanın harici bir tabaka girintisi varsa, 10px'e eşittir ve ikincisi aynı değere sahip harici bir üst girintisdir, daha sonra aralarındaki toplam mesafe ayrıca 10px olacaktır. Eğer 10 ve 15 sırasıyla ise, toplam 15 vb.

Bu girdap seçenekleri genellikle metinde, yani paragrafların tasarımında ve ayrıca görünür sınırları olan elementlerde kullanılır.

Ancak her iki özellik de bu unsurlarla sınırlı değildir. Kendinizi kullanmaları için seçenekleri seçersiniz, sadece size onlar için temeli sunmaya çalıştım.

Merhaba! Başlangıçta, bu makaleyi 4 küçük, ama sonra düşündüm. Ne için? Sonuçta, bu bilgiler tek bir malzeme içinde toplandığında daha uygundur.

Bu nedenle, bugün CSS'yi sola ve diğer tüm partilere, sağda, üstte ve altta nasıl yapacağınızı öğreneceğiz. Resimler ve metinler için yapılabilir. Onlar iki türdür:

• Dış;
• İç.

Birincisi için, ikinci dolgu için marj anahtar özelliği kullanılır. Netlik için, sizin için küçük bir örnek yaptım. Görsel olarak, görünür bir tablo eklenen iç ve dış mekan arasında ayrım yapmak için uygundu. Ne oldu?

Dış girintiler

Bunları CSS Stilleri dosyasında konuşun, sayfadaki bilgi bloğunun yönünü belirlemek mümkün olacaktır. Örneğin, sola ve aşağı kaydırıldı. Hemen nasıl görüneceğini gösterelim.

Genel olarak, girintileri ayarlamak için aşağıdaki seçenekleri uygulamak mümkündür.

Sol (marj-sol).

Doğru (kenar boşluğu).

Yukarıdan (marj-top).

Aşağıdan (marj-alt).

Şimdi başka bir harika nüans göstereceğim.

Gördüğünüz gibi, seçeneklerden birini kullanabilirsiniz - efekt aynıdır. Sadece ikinci durumda, kod daha kompakt. Ayrıca, girintilerin saat yönünde ayarlandığını da unutmayın. Hepsi üstte başlar ve solda biter.

İç girintiler

Burada eylem için prosedür benzer. Yalnızca şimdi tüm tablo için değil, sütunların içeriği için yeni özellikler ekleyin.

Ne olduğuna bakıyoruz.

CSS'ye dahili geri dönüşlerle analoji ile, dış kısımlar tarafından kısaltılmış kod veya taraflar için ayrı olarak reçete edilebilir.

Bunlar vurgulardı. Son olarak, bazı işleri nasıl kolaylaştırabileceğinizi göstereceğim.

Seçilen etiketlerin seviyesinde girintiler

Yukarıda bakılan durumlarda, aynı anda metin ve resimler için ayarlanırlar. Aslında, belirli bir etiket seviyesindeki elemanlara olan mesafeyi belirleyebilirsiniz. Nasıl çalıştığını göstereceğim. En son değişiklikleri iptal ediyorum ve stil dosyasında özel bir kodu gösteriyorum.

Değişiklikleri kaydettikten sonra ne olduğunu arıyorum.

Resim yerinde kaldı, sadece solda sonuçlanan metin kaydırıldı. Benzer manipülasyonlar diğer bloklara, örneğin, TR, yayılma.

Ek bilgi olarak, görev hakkındaki yayını tanıtırmayı öneriyorum. Ayrıca oldukça ilginç yollar da tarif edilmiştir. Metin veya diğer eylemlerde kırmızı bir dize oluşumu için faydalı olabilir.

Ek olarak, ücretsiz bültenin e-posta adresleri üzerindeki bir abonelik var. Bir blog aboneliği için özel bir form var. İletişime kadar.