Blok ve satır içi satır genişliği arasındaki fark nedir:% 100?

Question

Son zamanlarda inline-block s kullanımının uygun olduğunu anlamaya çalışıyorum. Sadece block öğesinden çok daha kullanışlı görünüyorlar. Aslında, bir satır içi blok elemanı, bir blok öğesinin yapabileceği her şeyi yapabiliyor gibi görünüyor, ancak biraz daha fazla stil ile.

display: inline-block; width: 100%; numaralı bir öğenin, display: block; numaralı bir öğeden başka bir nedeni var mı? (Biri daha uzun olduğu gerçeğinden başka?)

Bu konuyu w3c recommendation okuyarak araştırıyorum. Bir fark bulamıyorum.

Answer 1

Söylediğiniz şey oldukça doğru: "bir satır öğesi öğesi, bir blok öğesinin yapabileceği her şeyi yapabildiği görünüyor, ancak biraz fazladan bir stil." Bunun sebebi, her ikisinin de ortak olan bir şeyin, her ikisi de blok konteyner olmaları gerçeğidir. Bununla birlikte, bir yakalama var demektir.

Bir blok kutusu, bir blok biçimlendirme bağlamına katılır ve bir satır içi blok, bir satır içi biçimlendirme bağlamına katılır (ancak bir metin kutusu belirli koşullar altında olduğu gibi, torunları için bir blok biçimlendirme bağlamı oluştursa da). Bakınız section 9.4. Temel olarak, bu bir satır içi bloğun, metinmiş gibi işlendiği anlamına gelir; bu da, genellikle metin için geçerli olan çoğu özellik, bir satır içi bloğa uygulanacak anlamına gelir. Bu özellikler, diğerleri arasında text-indent, text-align ve vertical-align içerir.

Bu, ilk olarak display: inline-block kullanmadan kolayca önleyebileceğiniz istenmeyen yan etkilere neden olabilir. Ne olabileceğini ilginç bir örnek için this question'a bakın.

Satır içi bloklar için kutu modeli de aynı şekilde blok kutularınkinden farklıdır. Section 10 tüm Konunun özü ayrıntıları içerir, ancak temel farklar şunlardır: width: 100% beyanı olmadan

• , sen şüpheli olabilir gibi bir inline-block içeriğini uyacak şekilde küçülecek.

• Satır içi satır içi satır içi aktığı için, otomatik sol ve sağ kenar boşlukları ile ortalayamazsınız. Bunun yerine text-align: center kullanın. Aynı satırda onu çevreleyen hiçbir metin olmadan kendi satırında olması gerektiğini söylemez, ancak width: 100% ayarlıyorsanız, bu sorun olmaz.

• Satır içi bloklar asla tarafından margin collapse etkilenir.

bir blok tabanlı bir düzen oluşturmaya çalışıyorsanız

, sen display: block kullanıyor olmalıdır. Genel olarak, ikisi arasında karar verirken, her zaman varsayılan olarak display: block'u seçmeniz ve çok iyi bir nedeniniz varsa display: inline-block'u seçmeniz gerekir (ve engelleme sınırını azaltmak, iyi bir nedenden ötürü düşünmemek değildir).

Answer 2

Ben herşeyi @BoltClock; o çok iyi puanlar yapar.

Buna ek olarak, inline-block metin olarak ele alındığından, çevreleyen beyaz alan da metin olarak işlenir ve böylece block öğesinde olmayacağı şekilde oynatılır. Bu, düzeni için inline-block'u kullanmaya çalışırken kullanıcıları sık sık yakalar. Bu muhtemelen inline-block'u kullanmak için en büyük 'gotcha' dir.

Biraz daha ince bir nokta, özellikle sizin durumunuzda, yani width:100% ayarlandığında geçerlidir. Bu durumda, standart kutu modelinin sınırlarınızı, dolgunuzu ve kenar boşluklarını öğenin genişliğinin dışına yerleştirdiği için kullandığınız kutu modeline dikkat etmeniz gerekir. Böylece, kenarlık, dolgu veya kenar boşluğu kullanırsanız, öğeniz aslında% 100 genişliğinden biraz daha fazla yer kaplar.

Bu nokta block ve inline-block elemanları için de geçerlidir, fakat farkı, varsayılan her durumda genişliğini doldurmak için genişletmek için block normal width:100% ayarlanmış olması gerekmez çünkü olmasıdır inline-block ile oluşma olasılığı daha yüksektir, ve kutu modeli olmadan kenara gitmesine neden olur.

Bundan kaçınmak için, kutu modelini box-sizing:border-box kullanarak değiştirebilirsiniz, böylece kenarlıklar vb kutunun içine yerleştirilir, böylece with:100% için sorulursa, alacağınız budur. Daha fazla bilgi için MDN box-sizing page'a bakın.