html - <br> 标签是否占用一些水平空间？

Question

我不明白为什么它会渲染不同的两行，并用 br 标记垂直分隔，而两行垂直分隔，使第一行成为 block 级标记。

这是一个例子: 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>