包含文本的块元素根据是否包含标签而具有不同的宽度。为什么?

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


宽于

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


此行为在Chrome,Firefox,Opera,Safari,IE(在Win7 OS上为最新版本)中相同。

(当然,文本折行会随文本大小,边距和每行不同单词中的字符数而变化。)

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

最佳答案

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

我认为这是因为“块”强制执行了一个总块,但内联块将其绑定到文本流,因此跨度将调整为它的内容。

希望对您有帮助。

10-05 21:03
查看更多