Question

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

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

以下有效的HTML代码可以正常工作，但是我想调整内容之间的创建空间。我尝试在margin中使用CSS规则无济于事。 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边距或填充。

.bottomline {
     margin-top: 10px
 }

您尝试在另一个内联元素中插入一个内联元素的事实使您的示例也无法正常工作。您应该在彼此下方使用两个段落，并在它们之间留有空白。

Answer 2

您可以通过增加行高来增加内联元素的间距<span>。垂直边距不适用于嵌入式元素。

.bottomline { line-height: 30px; }

Answer 3

您可以使用pre标签在CSS中保留换行符和空格或white-space: pre。使用line-height来调整内容之间的间隔。

<pre>
Header


Text
</pre>

<div style="white-space: pre; line-height: 10px;">
Header


Text
</div>

<div style="white-space: pre; line-height: 50px;">
    Header


    Text
    </div>

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);
  white-space: pre;
}

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>

如何调整换行标签？

3 个答案: