CSS'de marj vs dolgu ne zaman kullanılır [kapalı]

CSS yazarken, ne zaman marginve ne zaman kullanılacağına karar vermek için kullanılması gereken belirli bir kural veya kılavuz var paddingmı?

TL; DR: Kenarlık veya arka planım olduğu ve görünür kutunun içindeki alanı artırmak istediğim hariç, varsayılan olarak her yerde kenar boşluğu kullanırım.

Bana göre, dolgu ve kenar boşluğu arasındaki en büyük fark, dikey kenar boşluklarının otomatik olarak çökmesi ve dolgu yapmamasıdır.

Dolgu ile birbirinin üstünde iki eleman düşünün 1em. Bu dolgu, elemanın bir parçası olarak kabul edilir ve her zaman korunur.

Böylece ilk elemanın içeriği, ardından ilk elemanın dolgusu, ardından ikinci elemanın dolgusu ve ardından ikinci elemanın içeriği ile sonuçlanacaksınız.

Böylece iki elementin içeriği 2embirbirinden ayrılacaktır.

Şimdi bu dolguyu 1em kenar boşluğu ile değiştirin. Kenar boşlukları öğenin dışında kabul edilir ve bitişik öğelerin kenar boşlukları çakışır.

Böylece bu örnekte, ilk öğenin içeriği ve ardından 1embirleşik marj ve ardından ikinci öğenin içeriği ile sonuçlanacaksınız. Yani iki elementin içeriği sadece 1embirbirinden ayrıdır.

Bu, 1embir öğenin yanındaki öğeye bakmaksızın, bir öğenin etrafındaki boşluğu söylemek istediğinizi bildiğinizde gerçekten yararlı olabilir .

Diğer iki büyük fark, dolgunun tıklama bölgesine ve arka plan rengine / görüntüsüne dahil edilmesidir ancak kenar boşluğuna dahil edilmemesidir.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

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

• Bloğu dışındaki şeylerden ayırmak için kenar boşluğunu kullanın
• İçeriği bloğun kenarlarından uzaklaştırmak için dolgu kullanın.

Bunu örnekler, diyagramlar ve hatta bir 'kendin dene' görünümü ile açıklarken gördüğüm en iyi şey burada .

Aşağıdaki diyagramda farkın anında görsel olarak anlaşılmasını sağlıyor.

Akılda tutulması gereken bir şey, standartlara uygun tarayıcıların ( IE tuhaflıkları bir istisnadır ) yalnızca içerik bölümünü verilen genişliğe dönüştürmektir, bu yüzden bunu düzen hesaplamalarında takip edin. Sınır kutusunun, Bootstrap 3 ile onu destekleyen bir geri dönüş gördüğünü de unutmayın .

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

Blok öğelerini duvarda asılı olan resimlerle karşılaştırın:

• Tarayıcı penceresi sadece duvara gibidir.
• İçerik sadece bir fotoğraf gibidir.
• Marjı sadece çerçeveli resim arasındaki duvar alanı gibidir.
• Dolgu sadece bir fotoğraf etrafında paspas gibidir.
• Sınır sadece çerçeve üzerinde sınırında gibidir.

Kenar boşluğu ve dolgu arasında karar verirken, bir öğeyi duvardaki diğer şeylerle ilişkili olarak aralıklandırırken kenar boşluğunu kullanmak ve öğenin görünümünü ayarlarken dolgu yapmak hoş bir kural . Kenar boşluğu, öğenin boyutunu değiştirmez, ancak dolgu genellikle öğeyi büyütür ¹ .

¹ Bu varsayılan kutu modeli, box-sizingöznitelik ile değiştirilebilir .

MARGIN vs PADDING :

1. Kenar boşluğu, bir öğede o öğe ile sayfanın diğer öğeleri arasında mesafe oluşturmak için kullanılır. Dolgu, bir öğenin içeriği ile kenarlığı arasında mesafe oluşturmak için kullanılır.

2. Kenar boşluğu, dolgu öğesinin bir parçası olduğu bir öğenin parçası değildir.

Lütfen Margin Vs Padding - CSS Properties'den çıkarılan aşağıdaki resme bakın

Gönderen https://www.w3schools.com/css/css_boxmodel.asp

Farklı bölümlerin açıklaması:

• İçerik - Metin ve resimlerin göründüğü kutunun içeriği

• Dolgu - İçeriğin çevresindeki bir alanı temizler. Dolgu şeffaf

• Kenarlık - Dolgu ve içeriğin etrafında dönen bir kenarlık

• Kenar Boşluğu - Kenarlığın dışındaki bir alanı temizler. Marj şeffaf

Canlı örnek (değerleri değiştirerek oynayın): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Tıklanabilirlik ve arka plan dolgusunun nasıl paddingve marginetkilendiğini gösteren bir HTML . Bir nesne dolgusuna tıklamalar alır, ancak bir kenar boşluğu alanına tıklanan nesnelerin tıklamaları üst nesneye 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ı ile ilgili şey, elemanın genişliği hakkında endişelenmenize gerek olmamasıdır.

Bir şey verirken olduğu gibi , ' uygunluğu korumak ve çevresindeki diğer öğeleri rahatsız etmemek {padding: 10px;}için öğenin genişliğini 20 piksel azaltmanız gerekir.

Bu yüzden genellikle her şeyi almak için dolguları kullanarak işe başlıyorum ' packed' ve sonra küçük değişiklikler için marjlar kullanıyorum.

Dikkat edilmesi gereken bir diğer şey, dolguların farklı tarayıcılarda daha tutarlı olması ve IE'nin negatif kenar boşluklarını çok iyi işlememesidir.

Kenar boşluğu, öğenin etrafındaki (kenarlığın dışında) bir alanı temizler, ancak dolgu öğesi, öğenin içeriğinin (kenarlığın içinde) etrafındaki bir alanı temizler.

bu, öğenizin dış kenar boşluklarını bilmediği anlamına gelir, bu nedenle dinamik web kontrolleri geliştiriyorsanız, mümkünse dolguya karşı kenar boşluğu kullanmanızı öneririz.

bazı durumlarda kenar boşluğu kullanmanız gerektiğini unutmayın.

marginVe arasındaki farkları bilmek iyidir padding. İşte bazı farklılıklar:

• Kenar boşluğu bir öğenin dış alanıdır , dolgu ise bir öğenin iç alanıdır .

• Kenar boşluğu, bir öğenin kenarlığının dışındaki boşluktur, dolgu ise kenarlığın içindeki boşluktur.

• Kenar boşluğu auto: değerini kabul eder margin: auto, ancak dolguyu otomatik olarak ayarlayamazsınız.

• Kenar boşluğu herhangi bir sayıya ayarlanabilir, ancak dolgu negatif olmamalıdır.

• Bir öğeye stil eklediğinizde, dolgu da etkilenir (örn. Arka plan rengi), ancak kenar boşluğu etkilenmez.

Dikkat edilmesi gereken bir şey, otomatik daraltma kenar boşlukları sizi rahatsız ettiğinde (ve öğelerinizde arka plan renkleri kullanmıyorsanız), dolgu kullanmanın daha kolay olduğu bir şeydir.

Dolguya Karşı Gelişmiş Marj Açıklaması

Bir paddingöğedeki içeriği boşluk olarak kullanmak uygun değildir ; Eğer gerekir yararlanmak marginüzerinde alt öğe yerine. Internet Explorer gibi eski tarayıcılar margin, Internet Explorer 4'te hangisinin mükemmel çalıştığını kullanma durumu dışında kutu modelini yanlış yorumladı .

Kullanmanın padding kullanıma uygun olmasının iki istisnası vardır :

1. Bu bir satır içi elemanına uygulanan olamaz , bir giriş elemanı olarak bir alt öğeleri içerir.

2. Bir satıcının * öksürük * Mozilla * öksürük * 'ünün tamir etmeyi reddettiği ve (W3C ve WHATWG editörleri ile düzenli değiş tokuşlar yaptığınız ölçüde) çalıştığı bir çözüm ve bu çözümün olması gerektiği kadar çeşitli tarayıcı hatalarını telafi ediyorsunuz. telafi ettiğiniz hatadan başka hiçbir şeyin stilini etkilemez.

% 100 genişlikli bir elemanınız olduğunda padding: 50px;etkili bir şekilde alın width: calc(100% + 100px);. Yana marginolan değil eklenen widthbeklenmedik düzeni sorunlarına neden Kullanmadığınız zaman marginüzerinde child elementsyerine paddingelemanı doğrudan.

Eğer konum eğer öyleyse değil mi bu iki şeyden birini yaparak değil elemana ama buna dolgu eklemek sen alacaksın sağlamak için doğrudan çocuk / çocuklar eleman (lar) var beklenen davranışı tüm tarayıcılarda.

İlk olarak, farklılıkların ne olduğuna ve her bir sorumluluğun ne olduğuna bakalım:

1) Kenar Boşluğu

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

2) Dolgu

CSS dolgu özellikleri, içerik çevresinde boşluk oluşturmak için kullanılır.
Dolgu, bir öğenin içeriğinin (kenarlığın içinde) etrafındaki bir alanı temizler.
CSS ile dolgu üzerinde tam kontrole sahip olursunuz. Bir öğenin her iki tarafı için (üst, sağ, alt ve sol) dolgu ayarlamak için CSS özellikleri vardır.

Dolayısıyla, Kenar Boşlukları öğelerin etrafındaki boşluktur, Dolgu ise öğenin bir parçası olan içerik etrafındaki boşluktur.

Yönetmenlerden gelen bu görüntü, kenar boşluğunun ve sınırların nasıl birleştiğini ve sınır kutusunun ve içerik kutusunun nasıl farklılaştığını gösterir.

Ayrıca her bölümü aşağıdaki gibi tanımlarlar:

• İçerik - Bu, metin, resim veya belki de diğer öğelerin bulunduğu gerçek içeriğin bulunduğu kutunun içerik alanını tanımlar.
• Dolgu - Bu, ana içeriği içeren kutusundan temizler.
  
• Kenarlık - bu hem içeriği hem de dolguyu çevreler.
• Kenar boşluğu - bu alan, onu diğer öğelerden ayıran şeffaf bir alan tanımlar.

Her zaman bu prensibi kullanırım:

Bu, Firefox'ta öğe inceleme özelliğinin kutu modelidir. Soğan gibi çalışır:

• İçeriğiniz ortada.
• Dolgu, içeriğiniz ile içindeki etiketin kenarı arasındaki boşluktur.
• Sınır ve özellikleri
• Kenar boşluğu, etiketin çevresindeki boşluktur.

Böylece, daha büyük kenar boşlukları içeriğinizin bulunduğu kutunun etrafında daha fazla alan açacaktır.

Daha büyük dolgu, içeriğiniz ile içinde bulunduğu kutu arasındaki boşluğu artırır.

Belirli bir değere ayarlanmışsa hiçbiri kutunun boyutunu büyütmez veya küçültmez.

kenar

Kenar boşluğu genellikle öğenin kendisi ile onun çevresi arasında bir boşluk oluşturmak için kullanılır.

Örneğin, ekranın kenarlarına yapışmasını ve beyaz boşluk olmaması için bir navbar oluştururken kullanıyorum.

Dolgu malzemesi

Genellikle bir kenarlığın içindeki bir öğeyi <div>veya benzer bir şeyi kullandığımda kullanıyorum ve boyutunu azaltmak istiyorum, ancak o zaman etrafındaki diğer öğeler arasındaki mesafeyi veya kenar boşluğunu korumak istiyorum.

Kısaca, durumsaldır; ne yapmaya çalıştığınıza bağlıdır.

Kenar boşluğu kutunun dışında ve dolgu kutunun içinde