浏览器如何呈现“跨度”？ [复制]答案

【问题标题】：how browser renders 'span'? [duplicate]浏览器如何呈现“跨度”？ [复制]
【发布时间】：2016-08-02 15:09:34
【问题描述】：

  <p>
    <span>cancel</span><span>comfirm</span>
  </p>
  <hr>
  <p>
    <span>cancel</span>
    <span>confirm</span>
  </p>

嘿应该给我同样的结果。但在第二个模板中，渲染后，“取消”和“确认”之间有“空格”。

标签是内联元素，所以换行符没有用。

我可以用 CSS 来浮动它们。

但是，我不知道原因。我只是认为块标签会有空间。

【问题讨论】：

标签： html css

【解决方案1】：

注意：OP 在回答后编辑了他的问题，但答案仍然是适用，他只是更改了 DOM 的顺序，因此现在他的图像是正确。

我认为您的图像不正确。它应该在first p element 中显示空白，而不是第二个。由于span 是inline 元素，当源代码中的内联元素之间有换行符时，它会导致浏览器呈现空白。

您可以通过将这些元素放在源代码中的一行中来以多种方式破解它，您已经在您的 2^nd 示例中执行此操作，或者您可以在您的父级上使用 font-size: 0;元素并为子元素重新设置font-size，或者您可以放置一个空注释，如this。

【讨论】：

请注意font-size:0 可能不是所有地方的正确解决方案，因为有些浏览器不能正确处理这个问题。例如，只要您有font-size:0，Opera 12 就会使用最小字体大小（在用户首选项中设置，例如 8px）。
@dukegod 不过，答案还是一样

【解决方案2】：

Span 用于一组您希望对其应用类似样式的文本。 Span 默认没有应用任何样式。 Span 通常用于对数据的特定部分进行样式设置。 Span 不会在浏览器上呈现为任何东西。

【讨论】：