是标签需要一些水平空间吗？

Question

我无法理解为什么它会从垂直分隔的两条直线上用br标签垂直分隔不同的两条线，使第一条线成为块级标签。

这是一个例子： https://jsfiddle.net/qzgeassf/

span.block {
  display: block;
}

div {
  text-align: center;
}

.border {
  border: 1px solid black;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div>
  <nav class="bottom-nav">
    <span class="border">
      <span>PORTFOLIO</span>
      <br>
      <span><i class="glyphicon glyphicon-circle-arrow-down"></i></span>
    </span>
  </nav>
</div>

<div>
  <span class="border">
    <span class="block">PORTFOLIO</span>
    <span><i class="glyphicon glyphicon-circle-arrow-down"></i></span>
  </span>
</div>

使用Chrome开发工具，我无法看到第一行末尾有什么空间。

Answer 1

您所看到的是非block范围内的空白区域。删除内联元素之间的空白区域，宽度相同。

span.block {
  display: block;
}

div {
  text-align: center;
}

.border {
  border: 1px solid black;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <nav class="bottom-nav"><span class="border"><span>PORTFOLIO</span><br><span><i class="glyphicon glyphicon-circle-arrow-down"></i></span></span></nav>
</div>

<div>
  <span class="border">
    <span class="block">PORTFOLIO</span>
    <span><i class="glyphicon glyphicon-circle-arrow-down"></i></span>
  </span>
</div>