Html块具有不同的宽度，有/无内

Question

包含文本的块元素具有不同的宽度，具体取决于它们是否包含
标记。为什么呢？

<div>
  <span>Mmm mmm mmmmmm</span>
</div>

比

更宽

<div>
  <span>Mmm mmm<br>mmmmmm</span>
</div>

此行为在Chrome，Firefox，Opera，Safari，IE（在Win7操作系统上的最新版本）中是相同的。

（文本分解当然会因文本大小，边填充和每行不同单词中的字符数而异。）

http://jsfiddle.net/olaim/q9BRT/1/

Answer 1

一个非常有趣的问题。 我通过将跨度显示样式更改为dispaly:block;来“解决”问题，因此两者都达到了200px的宽度。 see here

我认为这是因为“block”强制执行一个完整的块，但是内联块将它绑定到文本流，因此span会调整其内容的大小。

希望这对你有所帮助。