html - 如何调整换行标签？

Question

在尝试为某公司创建主页时，我遇到了以下问题。

<p class="headline">Headline<br><span class="bottomline">Bottomline</span></p>

以下有效的 HTML 代码可以正常工作，但我想调整内容之间创建的空间。我尝试在 CSS 中使用 margin 规则但无济于事。 bottomline 不会移动。回到手头的问题:如何在可以随意调整的段落中插入换行符？看起来好像我的问题是我的实现中的错误。因此，我将提供从实际源代码复制的代码片段。

div#article > div.parallex {
  display: flex;
  flex: 1 0 auto;
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: -1;
  justify-content: center;
  align-items: center;
  transform: translateZ(-2px) scale(3);
}

div#article > div.parallex > p.headline {
  color: black;
  font-size: 15px;
  font-weight: bold;
}

span.bottomline {
  color: #c3c3c3;
  letter-spacing: 3px;
}

<div id="article">
    <div class="parallex">
        <p class="headline">Company<sup style="color: #37924e;">■</sup><span class="bottomline">Description</span></p>
    </div>
</div>

Answer 1

br 不是垂直间距的最佳实践。当然，您可以执行多个 br 来增加空间，但更好的解决方案是使用 css margin 或 padding。

.bottomline {
     margin-top: 10px
 }

您尝试将一个内联元素放在另一个内联元素中这一事实使您的示例也无法正常工作。您应该在彼此下方使用两个段落，并用边距将它们隔开。