浏览器如何呈现“跨度”？

Question

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

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

标签是内联元素，因此换行符将无用。

我可以用CSS浮动它们。

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

ref img

Answer 1

  

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

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

您可以通过多种方式将这些元素放在源代码中的一行中，这些元素已经在您的2 ^nd 示例中进行，或者您可以使用font-size: 0;您的父元素并为子元素重新设置font-size，或者您可以添加this之类的空注释。

Answer 2

Span适用于您要应用类似样式的一组文本。默认情况下，Span没有应用任何样式。 Span通常用于样式化特定部分数据。 Span不会在浏览器上呈现为任何内容。