CSS yazarken, ne zaman kullanılacağına karar verilmesinde kullanılması gereken belirli bir kural veya kılavuz var mı?
margin ve ne zaman kullanılır
padding?
CSS yazarken, ne zaman kullanılacağına karar verilmesinde kullanılması gereken belirli bir kural veya kılavuz var mı?
margin ve ne zaman kullanılır
padding?
TL; DR: Varsayılan olarak, kenarlık veya arka planım olduğunda ve görünen kutunun içindeki boşluğu artırmak istediğimde, kenar boşluğunu her yerde kullanırım.
Bana göre dolgu ve marj arasındaki en büyük fark şu ki dikey kenar boşlukları otomatik olarak daraltılır ve dolgu yapılmaz. Biri diğerinin üzerinde, her biri 1em'lik dolgu ile ele alın. Bu dolgu elemanın bir parçası olarak kabul edilir ve her zaman korunur. Böylece, ilk elemanın içeriği ile son bulacaksınız, ardından birinci elemanın dolgusu ve ardından ikinci elemanın dolgusu, ardından ikinci elemanın içeriği takip edilecektir. Böylece iki unsurun içeriği 2em uzakta olacak.
Şimdi bu dolguyu 1em marjla değiştirin. Kenar boşluklarının öğenin dışında olduğu kabul edilir ve bitişik öğelerin kenar boşlukları üst üste gelecektir. Yani bu örnekte, ilk elemanın içeriği ile, ardından ikinci elemanın içeriği ile takip edilen birleşik kenar boşluğunun 1em'i ile sonuçlanacaksınız. Yani iki öğenin içeriği sadece 1em ayrıdır.
Bu, bir elemanın etrafındaki 1em uzunluğunun, bir sonraki elemanın ne olduğuna bakmaksızın, istediğinizi bildiğinizde gerçekten yararlı olabilir.
Diğer iki büyük farklılık ise, doldurmanın tıklama bölgesine ve arka plan rengi / görüntüsüne dahil edilmesi, ancak marjın olmamasıdır.
Dolgu iç kısımdayken kenar boşluğu blok öğelerin dışındadır.
Bunu örneklerle, şemalarla ve hatta 'kendiniz deneyin' ile açıklayan en iyi şey İşte.
Aşağıdaki şema, farkın anlık görsel bir anlayışını veriyor.
Akılda tutulması gereken bir şey standartlara uyumlu tarayıcılardır (IE quirks bir istisnadır) sadece içerik bölümünü verilen genişliğe getirin, bu yüzden düzeni hesaplamalarda takip edin. Ayrıca sınır kutusunun biraz Bootstrap 3 ile geri dönüş onu destekliyor.
MARGIN vs DOLGU MALZEMESİ :
Marj, bu öğe ile diğer sayfa öğeleri arasında mesafe oluşturmak için bir öğede kullanılır. Bir öğenin içeriği ve sınırı arasında dolgu oluşturmak için dolgu kullanılır.
Kenar boşluğu, dolgulamanın elemanın bir parçası olduğu bir öğenin parçası değildir.
Lütfen aşağıdaki resimlere bakın. Marj Vs Dolgu - CSS Özellikleri
Sorunuz için daha fazla teknik açıklama var, ancak bir yol arıyorsanız hakkında düşün ne zaman ve nasıl kullanılacağını seçmenize yardımcı olacak marj ve dolgu, bu yardımcı olabilir.
Bir duvarda asılı olan resimlere blok elemanlarını karşılaştırın:
Kenar boşluğu ve dolgu arasında karar verirken, kullanmak için güzel bir kuraldır. kenar Duvardaki diğer şeylerle ilişki içinde bir element bıraktığınızda, ve dolgu malzemesi öğenin görünüşünü ayarlarken. Kenar boşluğu, öğenin boyutunu değiştirmez, ancak dolgu genellikle öğeyi büyütür1.
1 Bu varsayılan kutu modeli ile değiştirilebilir
box-sizing nitelik.
İşte nasıl olduğunu gösteren bazı HTML
padding ve
margin tıklanabilirliği ve arka plan dolgusunu etkiler. Bir nesne, dolgularına tıklamaları alır, ancak bir nesne kenar boşluğu alanının üzerine tıklayarak ana sayfasına gider.
$(".outer").click(function(e) { console.log("outer"); e.stopPropagation(); }); $(".inner").click(function(e) { console.log("inner"); e.stopPropagation(); });
.outer { padding: 10px; background: red; } .inner { margin: 10px; padding: 10px; background: blue; border: solid white 1px; }
<script src="http://code.jquery.com/jquery-latest.js"></script> <div class="outer"> <div class="inner" style="position:relative; height:0px; width:0px"> </div> </div>
Kenar boşluklarıyla ilgili olan şey, öğenin genişliği konusunda endişelenmenize gerek olmamasıdır.
Bir şey verdiğiniz gibi
{padding: 10px;}, öğenin genişliğini 20px tutmak içinuygun've çevresindeki diğer unsurları rahatsız etmeyin.
Bu yüzden genellikle her şeyi elde etmek için kürek kullanarak başladım.
packed've sonra küçük tweaks için marjları kullanın.
Farkında olunması gereken başka bir şey de, farklı tarayıcılarda dolguların daha tutarlı olması ve IE'nin negatif marjları çok iyi tedavi etmemesidir.
Kenar boşluğu, bir öğenin etrafındaki alanı (sınırın dışında) temizler, ancak dolgu, bir öğenin içeriğinin (kenarlığın içinde) etrafındaki alanı temizler.
Bu, öğenizin dış kenar boşluklarını bilmediği anlamına gelir; bu nedenle, dinamik web denetimleri geliştiriyorsanız, eğer kullanabiliyorsanız, dolgu ve kenar boşluğu kullanmanız önerilir.
Bazı zamanlarda 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 senaryosunda, bunlar işlevsel olarak özdeştirler, fakat gerçekte, onlar, biraz farklı şekillerde davranırlar. Sayfadaki öğeleri taşımak için hangisini kullanacağınızı seçerken göz önünde bulundurmanız gereken kenar boşlukları ile dolgu arasında önemli farklar vardır. Ancak, marjların veya dolguların aynı etkiyi kullanabileceği durumlarda, kararın bir kısmı kişisel tercihlere indirgenir.
Kenar boşlukları ne zaman kullanılır?
Boşluğunuzun, bir sınır özelliği tarafından oluşturulan "kutu" dışında görünmesini istiyorsunuz. Kenar boşlukları sınırların dışında kalır, böylece sınırınızın tek bir yerde kalmasını istiyorsanız bunları kullanırsınız. Bu, örneğin ana içerik alanınızdan uzaklaşmak istediğiniz bir kenarlığa sahip bir kenar çubuğunuz varsa yararlı olabilir.
Arka plan renginizin veya resminizin kişisel alanınızı ele geçirmesini istemezsiniz. Arka plan renkleri ve resimler sınırda durur. Bu nedenle, arka planlarınızı yaptığınız alandan uzak tutmak istiyorsanız, kenar boşlukları istediğiniz mülktür.
Öğenizin üstünde ve altında katlanabilir boşluk olmasını istersiniz. Üst ve alt kenar boşlukları, kenar boşluklarından farklı davranır, çünkü iki kenar boşluğun üst üste gelmesi durumunda, en büyük kenar boşluğunun boyutuna göre daraltılır. Örneğin, paragrafı 20 piksellik bir üst kenar boşluğuna ve 15 piksellik bir alt kenar boşluğuna sahip olacak şekilde ayarlarsanız, paragraflar arasında yalnızca toplam 20 piksel boşluğa sahip olurum (iki kenar boşluğu birbiri içine düşer ve en büyük kazanır) .
Dolgu ne zaman kullanılır
Yarattığın tüm alanın senin sınırında olmasını istiyorsun. Dolgu, sınırları dahilinde bulunur, bu yüzden sınırlarınızı öğenizin içindeki içeriğin dışına itmek yararlıdır.
Oluşturduğunuz alana devam etmek için arka plan renginize / resminize ihtiyacınız var. Arkaplanınız dolgularınızın ardında devam edecek, bu nedenle arka planınızın göz atmasını istiyorsanız kullanın.
Üst ve alt alanınızın daha katı davranmasını istersiniz. Örneğin, belgenizdeki paragrafları 20 piksellik bir üst dolguya ve 15 piksellik bir alt dolguya sahip olacak şekilde ayarlarsanız, bir satırda iki paragrafınız olduğunda, aslında toplamda 35 piksel boşluğa sahip olurlar. onların arasında.
Farklı parçaların açıklaması:
İçerik - Metin ve görsellerin göründüğü kutunun içeriği
Dolgu - İçeriğin etrafındaki alanı temizler. Dolgu şeffaf
Kenarlık - Dolgu ve içeriğin etrafında dönen bir sınır
Marj - Sınırın dışındaki bir alanı temizler. Marj şeffaftır
İşte canlı örnek: (değerleri değiştirerek oyna) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel
Dikkat edilecek tek şey, otomatik daraltma kenar boşlukları sizi rahatsız ettiğinde (ve öğelerinizde arka plan renkleri kullanmıyorken), dolgu kullanmak daha kolay bir şey.