HTML block 在有/没有 的情况下获得不同的宽度

Question

包含文本的 block 元素根据它们是否包含
标签而获得不同的宽度。为什么？

<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

一个很有趣的问题。我通过将 span-display 样式更改为 dispaly:block; 来“解决”了这个问题，因此两者都达到了完整的 200px 宽度。 see here

我认为这是因为“ block ”强制执行总 block ，但内联 block 将其绑定(bind)到文本流，因此跨度会根据其内容调整大小。

希望对你有帮助。