为什么我的 HTML 标记会删除它前面的空格，为什么换行符在这里不起作用？ [复制]答案

【问题标题】：Why does my HTML tag remove the space before it and why doesn't line break work here? [duplicate]为什么我的 HTML 标记会删除它前面的空格，为什么换行符在这里不起作用？ [复制]
【发布时间】：2019-10-28 13:56:05
【问题描述】：

我正在制作一个占据整个屏幕的 div。我正在使用 flexbox 将内容置于屏幕中间。但是，当我尝试使用<b> 标签使其变为粗体时，它会删除它之前的空白，而当我使用<br /> 使文本转到下一行时，它不起作用。

为了获得其中的空间，我将空间替换为 &nbsp;。这行得通，但为什么它会在没有这个的情况下删除空间？ <br /> 问题仍然存在。

这是我的代码的链接：https://codepen.io/kadhirumasankar/pen/xowLEv

#header-container {
  background-color: #374457;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 4em;
}

<div id="header-container">
  Hi, I&#39;m <b>Name</b><br /> Student at <b>University</b>
</div>

我认为这个问题可能与我的 flexbox 有关，因为除此之外它看起来应该可以工作，但实际上并没有。

【问题讨论】：

永远不要让文本容器成为 flexbox 容器：stackoverflow.com/a/54903923/8620333
这可能是 React 渲染输出的问题。如果你这样做justify-content: space-between，你可以看到元素实际上是如何分割的。

标签： html css reactjs

【解决方案1】：

所有带有弹性盒子的东西都会被弯曲，处理这个问题的最好方法是在弹性盒子里有一个容器来存放你的文本。看看下面。

#header-container{
  background-color: #374457;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
}

<div id="header-container">
<div>
  Hi, I&#39;m <b>Name</b><br />
  Student at <b>University</b>
  </div>
</div>

【讨论】：