Soru CSS'de marj ve dolgulama ne zaman kullanılır?


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?


1973
2018-02-03 03:20


Menşei




Cevaplar:


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.


1217
2018-02-07 20:59



+1 Paragrafların tipografisini ve sıralı dizilerini, başlıkları ve listelerini tasarlarken neredeyse her zaman bitişik kenar boşluğu davranışı nedeniyle öğelerin kenar boşluklarıyla uzaması daha iyidir. - Pete B
Sadece dikey kenar boşluklarının çökeceğini, yatay kenar boşluklarının asla çökmeyeceğini belirtmelisiniz. Bakın CSS 2.1 belirtimi daha fazla ayrıntı için. - JPelletier
Neden yatay olanları yokken dikey marjlar çöküyor? Bu pek çok insanı karıştırırdı - marcospgp
Dikey kenar boşlukları yalnızca blok öğeleri için daraltılır. Satır içi blok elemanlar için kenar boşlukları hem dikey hem de yatay olarak eklenir. Bu yüzden, konteynırları doldurdukları için yatay kenar boşluklarının blok elemanlar üzerinde çökmemesi sorunu olduğundan emin değilim. - Mike
"Varsayılan olarak kenarlık veya arka planım dışında ve görünen kutunun içindeki boşluğu artırmak istediğimde, kenar boşluğunu her yerde kullanıyorum." - Büyük not, bunu tersine çevirme eğiliminde ve daima tutarlılıkla mücadele ediyorum. - Yannic Welle


Dolgu iç kısımdayken kenar boşluğu blok öğelerin dışındadır.

  • Bloğu, dışındaki şeylerden ayırmak için kenar boşluğu kullanın
  • İçeriği bloğun kenarlarından uzağa taşımak için dolgu kullanın.

enter image description here


1338
2018-02-03 03:22



henüz, doğru cevap aşağıdaki @pavon tarafından. bitişik elemanların kenar boşlukları üst üste biner, buna karşılık dolgu malzemesi çakışmaz. ben. e., toplam ayırma padding(A) + padding(B) + max(margin(A), margin(B)) - necromancer
İşte iyi bir uygulama: kullanım katı kırmızı sınır Dolgu ve kenar boşluğunu kontrol etmek için Bazen, <a>dolgu ve kenar boşluğuyla çevrili, bazı metinleri tutar. Tıklayabileceğimiz alanı kontrol etmek için bu numarayı kullanın. - chenghuayang


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.

enter image description here

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.


525
2018-05-04 19:21



w3.org/TR/CSS2/box.html#box-dimensions ve w3 gelen resim w3.org/TR/CSS2/images/boxdim.png - JP Hellemons


MARGIN vs DOLGU MALZEMESİ :

  1. 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.

  2. 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

Margin vs Padding


77
2018-05-21 07:00



Kenarlık referansı, oldukça belirsiz değil, 'dolgu, içeride iken, blok elemanların dışında kalan kenarlıktır.' neyin dışında / içinde? İçeride / dışarıda, statik bir pozisyon var, bu da içerideki elemanın boyutunu etkilemez. Bu cevap benim için açıklığa kavuşturdu. - nicodemus13


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:

  • tarayıcı penceresi duvar gibi.
  • içerik bir fotoğraf gibi.
  • kenar çerçeveli resimler arasındaki duvar alanı gibidir.
  • dolgu malzemesi fotoğrafın etrafındaki paspas gibi.
  • sınır bir çerçeve üzerindeki sınır gibidir.

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.


73
2017-12-17 01:10



Aslında katılıyorum box-sizing: border-box "içeriği daha küçük alan" yapmak. Burada 2 kutu içeren bir keman var, eğer aynısını doldurup “Aktif” eklediysem, sonra imlecin üzerine “Devre Dışı Bırak”, kullanıp kullanmamın önemi yoktu. box-sizing. Kutuyu genişletirdi. En uzun kutunun genişletileceği dolgunluğu en üst seviyeye çıkarmak zorunda kaldım, sonra her kelime için aynı genişliği koruyacak kutuya giren diğer kelimeler için eşleşen bir kombinasyon bulmak için deneme yanılma yöntemini kullanın: jsfiddle.net/navyjax2/ngzqqjah - vapcguy
Hey vapcguy, girişiniz için teşekkürler. Bildirimde, genellikle, bir öğe için genişlik veya yükseklik bildirildiğinde, beyan edilmeyen boyutlara sahip bir öğe gerçekten etkilenmez. border-box (görmek: jsfiddle.net/8yravLmL/1). Karşıtlığımı önlemek için cevabımı daha nüanslı hale getireceğim. - stvnrynlds


İş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>


30
2018-02-09 05:29



jsfiddle üzerinde benzer kodu çalıştırabilirsiniz: jsfiddle.net/fschwiet/y74Nz/3 - Frank Schwieterman


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.


30
2018-02-03 05:35





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.

enter image description here

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.


27
2017-08-01 11:28





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

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?

  1. 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.

  2. 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.

  3. Öğ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

  1. 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.

  2. 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.

  3. Ü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.


21
2017-09-09 20:00





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

Showing various parts

İşte canlı örnek: (değerleri değiştirerek oyna) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel


19
2017-11-03 11:43





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.


17
2018-02-03 03:28