kenar boşluğu veya dolgu? Neyi ve nerede kullanacağını düşünmek. Dolgu, Kenar Boşluğu ve Kenarlık - CSS iç ve dış dolgusunun yanı sıra tüm taraflar için çerçeveler (üst, alt, sol, sağ) ayarladık

19 yanıt

TL; doktor: Varsayılan olarak, bir kenarlığım veya arka planım olduğu ve bu görünür kutunun içindeki alanı artırmak istediğim durumlar dışında kutuyu her yerde kullanırım.

benim için en büyük fark dolgu ve kenar boşluğu arasında dikey kenar boşlukları dolgu yapılmazken otomatik olarak sıkıştırılır.

Her biri 1em girintisine sahip, biri diğerinin üzerinde olan iki öğe düşünün. Bu dolgu, öğenin bir parçası olarak kabul edilir ve her zaman korunur.

Böylece ilk öğenin içeriğini, ardından ilk öğenin dolgusunu, ardından ikincinin dolgusunu ve ardından ikinci öğenin içeriğini alacaksınız.

Böylece bu 2 elementin içeriği 2em'e 2 element olacak.

Şimdi bu dolguyu 1em kenar boşluğuyla değiştirin. Kenar boşlukları öğenin dışında kabul edilir ve bitişik öğe kenar boşlukları örtüşür.

Bu örnekte, ilk öğenin içeriğini, ardından birleşik giriş kutusunun 1em'ini ve ardından ikinci öğenin içeriğini alacaksınız. Böylece, bu iki elementin içeriği 1 1em'lik bir mesafede bulunmaktadır.

Bu, hangi öğenin yanında olursa olsun, öğeler arasında 1em boşluk bırakmak istediğinizi bildiğinizde çok yararlı olabilir.

Diğer iki büyük fark, dolgunun tıklama alanına ve arka plan/görüntü rengine dahil edilmesi, ancak kutuya dahil edilmemesidir.

Bunu örneklerle, diyagramlarla ve hatta "kendin dene" ile açıklayan gördüğüm en iyi şey .

Aşağıdaki şema anlık Görsel sunum fark hakkında.

Akılda tutulması gereken bir şey, standartlarla uyumlu tarayıcıların (IE tuhaflıkları istisnadır) içeriğin yalnızca bir kısmını belirli bir genişliğe göre oluşturmasıdır, bu nedenle mizanpaj hesaplamalarınızda bunu takip edin. Ayrıca pencere çerçevesinde Bootstrap 3 desteğini görebildiğinize dikkat edin.

MARJ karşı DOLGU MALZEMESİ:

Kenar boşluğu, o öğe ile sayfadaki diğer öğeler arasında boşluk oluşturmak için bir öğe üzerinde kullanılır. Öğenin içeriği ile kenarlığı arasında boşluk oluşturmak için dolgunun kullanıldığı yer.

Kenar boşluğu, dolgunun öğenin bir parçası olduğu yerde öğenin bir parçası değildir.

Sorunuz için daha teknik açıklamalar var, ancak bunları ne zaman ve nasıl kullanacağınızı seçmenize yardımcı olacak kenar boşluğu ve dolgu hakkında düşünmenin bir yolunu arıyorsanız, bu yardımcı olabilir.

Bloğun elemanlarını duvarda asılı olan resimlerle karşılaştırın:

• pencere tarayıcı duvara benziyor.
• içerik fotoğrafa benziyor.
• kenar boşluğu bir çerçevedeki görüntüler arasındaki boşluğa benzer.
• ilave fotoğrafın etrafında paspas gibi görünüyor.
• Kenarlık, çerçeve kenarlığına benzer.

Kenar boşluğu ve dolgu konusuna karar verirken, genel bir kural kullanmakta fayda var. kenar boşluğu bir elemanı duvardaki diğer şeylere göre konumlandırdığınızda ve ilave. > kurduğunuzda dış görünüş elemanın kendisi. Kenar boşluğu öğenin boyutunu değiştirmez, ancak dolgu genellikle öğeyi 1'den büyük yapar.

1 Bu varsayılan pencere modeli, kutu boyutlandırma özniteliği kullanılarak değiştirilebilir.

Kenar boşlukları söz konusu olduğunda, öğenin genişliği hakkında endişelenmenize gerek yoktur.

Bir şey verdiğinizde olduğu gibi (padding: 10px;), elemanın genişliğini azaltmanız gerekir. 20 piksel, kaydetmek " Uygun" ve etrafındaki diğer unsurları kırmayın.

Bu yüzden genellikle her şeyi "paketlemek" için dolgular kullanarak başlarım ve ardından küçük ince ayarlar için kenar boşluklarını kullanırım.

Dikkat edilmesi gereken başka bir şey de, dolguların daha uyumlu olmasıdır. farklı tarayıcılar, ve IE, negatif kenar boşluklarını çok iyi işlemez.

Doldurma ve kenar boşluğunun tıklanabilirliği ve arka plan dolgusunu nasıl etkilediğini gösteren bazı HTML'leri burada bulabilirsiniz. Nesne, dolgusu üzerindeki tıklamaları alır, ancak üst nesnesine gitmek için nesnenin kenar boşluğu"d alanına tıklar.

$(".outer").click(function(e) ( console.log("dış"); e.stopPropagation(); )); $(".inner").click(function(e) ( console.log("inner"); e.stopPropagation(); )); .outer ( dolgu: 10 piksel; arka plan: kırmızı; ) .inner ( kenar boşluğu: 10 piksel; dolgu: 10 piksel; arka plan: mavi; kenarlık: düz beyaz 1 piksel; )

Kenar boşlukları, öğenin etrafındaki alanı (kenarlığın dışında) temizler, ancak dolgu, öğenin içeriğinin etrafındaki alanı (kenarlığın içindeki) temizler.

bu, öğenizin dış sınırlarının farkında olmadığı anlamına gelir, bu nedenle dinamik web kontrolleri tasarlıyorsanız, mümkünse dolgu ve kenar boşluğu kullanmanızı öneririm.

birkaç kez marj kullanmanız gerektiğini unutmayın.

CSS'de öğelerinizin etrafında boşluk yaratmanın iki yolu vardır: kenar boşlukları ve dolgu. Çoğu kullanım durumunda, işlevsel olarak aynıdırlar, ancak gerçekte biraz farklı davranırlar. Mevcut önemli farklılıklarÖğeleri sayfa etrafında taşımak için ne kullanacağınızı seçerken göz önünde bulundurmanız gereken kenar boşlukları ve dolgu arasında. Bununla birlikte, kenar boşluğu veya dolgunun aynı etki için kullanılabildiği durumlarda, birçok karar kişisel tercihlere bağlıdır.

Kenar Boşlukları Ne Zaman Kullanılır

Aralığınızın oluşturulan alanın dışında görünmesini istiyor musunuz? sınır mülkü. Kenar boşlukları sınırların dışındadır, bu nedenle sınırınızın tek bir yerde kalmasını istiyorsanız bunları kullanırsınız. Bu, örneğin aşağıdakilere sahipseniz yararlı olabilir: yan panel ana içerik alanından uzaklaşmak istediğiniz kenarlıkla.

Arka plan renginin veya resmin gizliliğinizi istila etmesini istemezsiniz. Arka plan renkleri ve görüntüler sınırda durur, bu nedenle arka planlarınızı yaptığınız alanın dışında tutmayı tercih ederseniz, kenar boşlukları istediğiniz özelliktir.

Öğenizin üstündeki ve altındaki boşluğu sıfırlamak istiyorsunuz. Üst ve alt kenar boşlukları, yan kenar boşluklarından farklı davranır, çünkü iki kenar boşluğu üst üste istiflenirse, en büyük kenar boşluğu kümesinin boyutuna küçülürler. Örneğin, üst kenar boşluğu 20 piksel ve alt kenar boşluğu 15 piksel olan bir paragraf ayarlarsam, paragraflar arasında yalnızca 20 piksel boşluk olur (iki kenar birbirinden ayrılır ve en büyük kazanç).

Ped ne zaman kullanılır

Yarattığınız tüm alanın sınırlarınızın içinde olmasını istiyorsunuz. Dolgu, kenarlıklarınızın içindedir, bu nedenle kenarlıklarınızı öğenizin içindeki içerikten uzaklaştırmak için kullanışlıdır.

Oluşturduğunuz alanda arka plan renginizin/resmin devam etmesini istiyorsunuz. Arka planınız dolgunuzun arkasında devam edecek, bu nedenle yalnızca arka planınızın böyle görünmesini istiyorsanız kullanın.

Üst ve alt alanınızın daha katı davranmasını istiyorsunuz. Örneğin, belgenizdeki paragrafları üst dolgusu 20 piksel ve alt dolgusu 15 piksel olacak şekilde ayarlarsanız, bir satırda iki paragrafınız olduğunda, aralarında toplam 35 piksel boşluk olur.

Gelişmiş alan farkı ve açıklama

Bir öğedeki boşluk içeriğinde dolgu kullanmak pratik değildir; alt öğede kenar boşluğu kullanmalısınız. Eski tarayıcılar Internet Explorer, Internet Explorer 4'te iyi çalışan margin kullanımı dışında pencere modelini yanlış yorumladı.

Dolgu kullanırken iki istisna vardır:

Giriş öğesi gibi alt öğeleri içeremeyen bir satır içi öğe için geçerlidir.

Bunu çok telafi ediyorsun. farklı hata tarayıcı satıcısı *öksürük* Mozilla*öksürük* düzeltmeyi reddediyor ve (W3C ve WHATWG editörleriyle düzenli olarak değiş tokuş yaptığınız ölçüde) sahip olmanız gerekenden emin olun çalışma çözümü ve bu karar, telafi ettiğiniz hata dışında hiçbir şeyin stilini etkilemeyecektir.

Dolgulu %100 genişlikte bir öğeniz olduğunda: 50px; , genişlik alacaksınız: calc(100% + 100px); . Genişlik öğesine kenar boşluğu eklenmediğinden, doğrudan öğe üzerinde dolgu yapmak yerine alt öğelerde kenar boşluğu kullanırsanız beklenmeyen düzen sorunlarına neden olmaz.

Bu nedenle, bu iki şeyden birini yapmazsanız, öğeye dolgu eklemeyin, bunun yerine tüm tarayıcılarda beklenen davranışı sağlamak için alt/alt öğesini kullanın.

Önce farklılıkların ne olduğunu ve her bir sorumluluğun ne olduğunu görelim:

1) marj

CSS kenar boşluğu özellikleri, öğelerin etrafında boşluk oluşturmak için kullanılır.
Kenar boşluğu özellikleri, kenar boşluğunun dışındaki boşluk miktarını ayarlar. CSS ile kenar boşlukları üzerinde tam kontrole sahipsiniz.
Bir öğenin her bir tarafının (üst, sağ, alt ve sol) kenar boşluğunu ayarlamak için CSS Özellikleri vardır.

2) Conta

CSS dolgu özellikleri, içeriğin etrafında boşluk oluşturmak için kullanılır.
Dolgu, öğenin içeriğinin etrafındaki alanı (kenarlığın içindeki) temizler.
Sahip olduğunuz CSS ile tam kontrol ek üzerinde. Bir öğenin her bir tarafı için (üst, sağ, alt ve sol) dolgu ayarlamak için CSS özellikleri vardır.

Çok basit alanlar elemanların etrafındaki boşluktur ve pedöğenin parçası olan içeriğin etrafındaki boşluktur.



Codemancer'lardan alınan bu görüntü, sınırların ve sınırların nasıl kullanılabilir hale getirildiğini ve sınırların ve içerik kutusunun onları nasıl farklı kıldığını gösterir.

Bir önceki bölümde böyle bir şeyden bahsetmiştik. CSS özellikleri, kenar boşluğu (alan) ve dolgu (girinti) gibi. Şimdi onlar üzerinde daha ayrıntılı olarak duracağız ve birbirlerinden nasıl farklı olduklarını ve hangi özelliklere sahip olduklarını ele alacağız.

Öğeler arasında her iki şekilde de boşluklar oluşturabilirsiniz, ancak dolgu, içerikten bloğun kenarına kadar olan girintiyse, o zaman kenar boşluğu bir bloktan diğerine olan mesafedir, bloklar arası boşluktur. Ekran görüntüsü iyi bir örnek gösterir:

Dolgu, içeriği blok sınırından ayırırken kenar boşluğu bloklar arasında boşluklar oluşturur

Gördüğünüz gibi alanlar CSS dolgusu birbirinden farklıdır, ancak bazen koda bakmadan mesafeyi ayarlamak için hangi özelliğin kullanıldığını belirlemek imkansızdır. Bu, içerik bloğu için çerçeve veya arka plan olmadığında gerçekleşir.

Bir öğenin her iki tarafından CSS'de kenar boşluğu veya dolgu ayarlamak için aşağıdaki özellikler vardır:


girintiler:

• dolgu üst: anlam;
• dolgu-sağ: anlam;
• dolgu-alt: anlam;
• dolgu-sol: anlam;

Alanlar:

• kenar boşluğu: anlam;
• kenar-sağ: anlam;
• kenar boşluğu-alt: anlam;
• sol kenar boşluğu: anlam;

Değerler herhangi bir şekilde belirtilebilir css birimleri- px, em, % vb. Örnek: margin-top: 15px .

bir de çok var kullanışlı şey nasıl Kenar boşluğu ve dolgu için CSS kısayolu. Bir elemanın dört kenarı için de kenar boşlukları veya dolgu ayarlamanız gerekiyorsa, her bir kenar için ayrı ayrı özellik yazmanız gerekmez. Her şey daha basit hale getirildi: kenar boşluğu ve dolgu için aynı anda 1, 2, 3 veya 4 değer belirtebilirsiniz. Ayarların nasıl dağıtıldığı, değerlerin sayısına bağlıdır:

• 4 değer: dolgu, öğenin tüm kenarları için şu sırayla ayarlanır: üst, sağ, alt, sol: dolgu: 2px 4px 5px 10px;
• 3 değer: dolgu önce üst taraf için, ardından hem sol hem de sağ için ve ardından alt taraf için ayarlanır: dolgu: 3px 6px 9px;
• 2 değer: dolgu önce üst ve alt kenarlardan aynı anda ayarlanır ve ardından - sol ve sağ taraflar için aynı anda: dolgu: 6px 12px;
• 1 değer: öğenin tüm kenarları için aynı dolguyu ayarlayın: padding: 3px;

Aynı kurallar CSS kenar boşluğu özelliği için de geçerlidir. Kenar boşluğu için negatif değerler de kullanabileceğinizi unutmayın (örneğin, -3px), bu bazen oldukça faydalı olabilir.

çöken marj

Durumu hayal edin: iki blok elemanıüst üstedir ve onlara kenar boşlukları verilir. Üst blok kenar boşluğu: 60px ve alt blok kenar boşluğu: 30px olarak ayarlanmıştır. İki öğenin iki kenar boşluğunun basitçe birbirine değeceğini ve sonuç olarak bloklar arasındaki boşluğun 90 piksel olacağını varsaymak mantıklı olacaktır.

Ancak, işler farklıdır. Aslında böyle bir durumda, bitişik iki öğe alanından en büyük boyut seçildiğinde çökme adı verilen bir etki ortaya çıkar. Örneğimizde, elemanlar arasında ortaya çıkan boşluk 60 piksel olacaktır.


Bloklar arasındaki mesafe, değerlerden büyük olanına eşittir.

Daraltılmış kenar boşlukları, öğelerin yalnızca üst ve alt kenar boşlukları için çalışır ve sağ ve sol kenar boşluklarına uygulanmaz. Boşluğun nihai değeri şu şekilde hesaplanır: farklı durumlar farklı:

• Her iki kenar boşluğu değeri de pozitif olduğunda, son kenar boşluğu boyutu daha büyük değer olacaktır.
• Değerlerden biri negatifse, alan boyutunu hesaplamak için değerlerin toplamı alınmalıdır. Örneğin, 20px ve -18px değerleri ile alan boyutu şöyle olacaktır:
  20 + (-18) = 20 - 18 = 2 piksel.
• Her iki değer de negatifse, bu sayıların modülleri karşılaştırılır ve modülünde daha büyük olan sayı seçilir (dolayısıyla, daha küçük olan sayı seçilir). negatif sayılar). Örnek: -6px ve -8px alanlarının değerlerini karşılaştırmak istiyorsunuz. Karşılaştırılan sayıların modülleri sırasıyla 6 ve 8'dir. Bunu 6 -8 takip eder. Son alan boyutu -8 pikseldir.
• değerler içinde ise farklı birimler CSS, bire indirgenir, ardından karşılaştırılır ve daha büyük değer seçilir.
• Alt öğeler için kenar boşluğunun boyutu daha da ilginçtir: çocuk, ebeveynden daha büyük bir kenar boşluğuna sahipse, ona öncelik verilir. Bu durumda, ebeveynin üst ve alt kenar boşluklarının boyutları, çocuk için ayarlananla aynı olacaktır. Bu durumda, ebeveyn ile çocuk arasında bir mesafe olmayacaktır.

Kenar boşluğu ve dolgu arasındaki farkın ne olduğunu görelim. Bunu yapmak için, CSS'deki kutu modelini bir kez daha hatırlayın.

MARJIN (Marjlar) - bu, bloğun sınırından (çerçevesinden) en yakın öğelere veya yoksa, belgenin kenarlarına olan mesafedir.

DOLGU MALZEMESİ - sınır (çerçeve) ile bloğun içeriği arasındaki bir iç mesafe gibi.

Örnek: Üç farklı paragraf için farklı kenar boşluğu ve dolgu değerlerine sahip üç stil oluşturalım ve sonuca bakalım:

Şunlar. değerler saat yönünde yazılır: üst, sağ, alt, sol.

Hangi durumlarda girintileri kullanmak daha iyidir ve hangi alanlarda?

Birkaç önemli fark:

Girintiler (dolgu) bloğun içinde ve kenar boşlukları (kenar boşluğu) - bunların dışında bulunur;

Kutu arka planı ve arka plan görüntüsü, kenar boşluklarına değil, yalnızca dolguya uygulanır. Kenar boşlukları her zaman şeffaftır ve üst öğenin arka planının görünmesini sağlar.

14. Blokların yüksekliği (yüksekliği) ve genişliği (genişliği)

Varsayılan olarak, blokların yüksekliği ve genişliği otomatik olarak belirlenir, yani. daha fazla metin (veya diğer içerik) daha geniş ve daha uzun blok.

Ancak CSS teknolojisi sayesinde ihtiyacımız olan blokların genişliğini ve yüksekliğini ayarlayabiliyoruz.

YÜKSEKLİK– bloğun yüksekliğini belirleyen özellik;

GENİŞLİK– bloğun genişliğini ayarlayan bir özellik;

Öğe genellikle CSS'de bloklar olarak kullanılır. BÖL. Ancak, genişlik ve yükseklik özelliği paragraflara, listelere ve daha fazlasına uygulanabilir.

4 sınıf oluşturalım ve bunları tek tek aynı kutuya atayalım ( bu durum BÖL) metin ile.

Şimdi yükseklik sabitlendi ve genişlik içerik tarafından uzatıldı.

.box3( genişlik: 300 piksel; yükseklik: 600 piksel; kenarlık: 1 piksel düz kırmızı; arka plan: #FFE446; )

Burada hem yükseklik hem de genişlik sabittir.

.box4( genişlik: 300 piksel; yükseklik: 300 piksel; kenarlık: 1 piksel düz kırmızı; arka plan: #FFE446; )

Ve bu, içeriğin sığmaması durumunda sabit genişlik ve yüksekliğe sahip bir kutunun nasıl görüneceğinin bir örneğidir. Metin sadece bloğun ötesine geçer.

Not!

Bu nedenle, bir bloğun genişliğini belirterek, yalnızca içerik için ayrılmış bloğun bölümünün genişliğini belirtmiş olursunuz.

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 çok sayıda 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.

Açıklık 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. Üstelik 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? yaratmaya değer mi ek isim ile aynı kuralı içeren class .add-card marj özelliği, .card sınıfı nedir? 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 ve aynı zamanda üzerinde test edilen bir kalem projesini değerlendirmenize sunmak istiyorum. kendi deneyimi iki kural. 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.

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.

Şimdiye kadar epey çalıştık basit özellikler yazı tiplerini (), metni () yöneten ve modeli düşünen

Evet, kullanım ilkelerini de tüm detaylarıyla ele almayı başardık (birkaç makaleye yayılmış). Şimdi, belgelerin (web sayfaları) oluşturulması 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. kendinizi tanımak isterseniz önceki yayınlar konuyla ilgili, o zaman hoş geldiniz.

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, ana öğenin içerik alanından). Ayrıca, bu sadece mantıklı olacak şekilde sağ ve sol kenar boşluğu için değil, üst ve alt kenar boşluğu için de yüzdeler kabın 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 (bunlar boşluk karakteri) ve desenle 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ü(atma son değer ilkiyle aynı):

   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 (çöken kenar boşlukları yalnızca dikey olarak oluşabilir) ve her ikisinin de zıt kenar boşlukları varsa (örneğin, üst öğe için alt ve üst boşluk alt için), o zaman daha büyük bir Marj değeri daha küçük olanı emecektir.

Ö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 Margin ve dikey olarak komşu 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şaretler, o zaman sayıları basitçe toplanır ve bloklar elde edilen değer ile 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 geçecektir en iyi htmlöğe.

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ı, ancak artan girintiyi hiçbir şekilde etkilemeyeceğini söyleyeceğim. genel konum diğer komşu unsurlara göre

Ne zaman blok etiketi(başlıklar, paragraflar) dikey olarak artırılmış bir 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 söz edilmiyor ve ayrıca bu CSS kuralı negatif değerlere izin vermiyor (sadece pozitif olabilirler - sıfırdan ve üstünden). Şunlar. İle birlikte Dolgu malzemesi 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), o zaman 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 ( verilen 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) kabul edilen atama yöntemlerini kullanabilir ( altıgen kod, kelimeler, vb.):

kenarlık rengi:kırmızı;

Varsayılan olarak, kenarlığın rengi açıkça ayarlanmadıysa, verilen öğenin içindeki yazı tipi için kullanılan kullanılacaktır.
css Kenarlık stili özellikçerçeve türünü sözcüklerle belirtmenize 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

adresine giderek daha fazla video izleyebilirsiniz.

");">


ilginizi çekebilir

Yükseklik, genişlik ve taşma - CSS kuralları içerik alanını blok düzeninde tanımlamak için
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 kayan ve temizleyin - araçlar blok düzeni
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