Arasındaki fark tam olarak nedir inlineinline-blockCSS ve değerleridisplay ?

Görsel bir cevap

<span>İçinde bir element düşünün <div>. Eğer verirsen<span>Elemana 100 piksel yükseklik ve kırmızı kenarlık

ekran: satır içi

display: inline-block

Ekran bloğu

Kod: http://jsfiddle.net/Mta2b/

Olan elemanlar display:inline-blockgibi display:inlineelemanlar, ancak bir olabilir genişlik ve yükseklik . Bu, satır içi blok öğesini metin veya diğer öğeler içinde akarken blok olarak kullanabileceğiniz anlamına gelir.

Desteklenen stillerin özet olarak farkı:

• inline : Sadece margin-left, margin-right, padding-left,padding-right
• içi blok : margin, padding, height,width

display: inline;, bir cümlede kullanılacak bir görüntüleme modudur. Örneğin, bir paragrafınız varsa ve yaptığınız tek bir kelimeyi vurgulamak istiyorsanız:

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

<em>Türünde bir display: inline;bu etiketi her zaman cümle içinde kullanıldığı için, varsayılan olarak. <p>Türünde bir display: block;bir cümle, ne de bir cümlede, bu cümle bir blok var ikisi de değil, çünkü varsayılan olarak.

Olan bir öğe a veya a veya dikey display: inline; olamaz . Olan bir unsur olabilir bir var , ve . Bir eklemek isterseniz için eleman, sen bu maddeyi ayarlamak gerekir . Şimdi birheightwidthmargindisplay: block; widthheightmargin
height<em>display: inline-block;height öğeye ve diğer tüm blok stillerine ( blockparçası inline-block) , ancak bir cümleye ( inlineparçası inline-block) yerleştirilir.

Yanıtlarda belirtilmeyen bir şey, satır içi öğenin satırlar arasında kırılabileceği, satır içi blok ise (ve açıkça engelleyemediği)! Bu nedenle satır içi öğeler, içindeki metin ve blokların cümlelerini biçimlendirmek için yararlı olabilir, ancak doldurulmadıkları için satır yüksekliğini kullanabilirsiniz .

<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline-block; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Yukarıdaki tüm yanıtlar orijinal soru hakkında önemli bilgilere katkıda bulunur. Ancak yanlış görünen bir genelleme var.

Bu mümkündür grubu genişliği ve en az bir adet içi elemanının (ı düsünebilirz) yüksekliği göre -<img> öğeye .

Her ikisi de burada ve bu yinelenen cevapta bunun mümkün olmadığını, ancak geçerli bir genel kural gibi görünmediğini kabul etti.

Misal:

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

<img src="#" />

imgVardır display: inline, ancak onun widthve heightbaşarıyla kuruldu.

splattne'nin cevabı muhtemelen her şeyin çoğunu kapsıyordu, bu yüzden aynı şeyi tekrarlamam, ama: inlineve CSS özelliği inline-blockile farklı davranıyorlar direction.

Bir sonraki snippet'te one two(sırasıyla), LTR düzenlerinde olduğu gibi işlendiğini görürsünüz . Buradaki tarayıcının İngilizce kısmı LTR metni olarak otomatik olarak algıladığını ve soldan sağa oluşturduğundan şüpheleniyorum.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Devam edip seti Ancak, displayhiç inline-block, tarayıcı saygı görünen directionböylece mülkiyet ve sırayla sağdan sola doğru Elemanları kılmak two oneoluşturulur.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Bunun başka tuhaflıkları olup olmadığını bilmiyorum, sadece Chrome'da bunu ampirik olarak buldum.