Question

新手的一点点，并试图弄清楚可能很简单的事情：

我正在尝试“堆叠”一些文字，但在大词之间插入一个小词，如下：

此

IS AN

重要

句

所以我在自己的类中使用主文本布局HTML，字体大小为8em，中间的跨度为较小的单词。

THIS<br>IS AN<br><span class="important">important</span><br>SENTENCE<br>

在CSS中，我为“重要”设置了一个类：

.important {
    font-size: 0.5em;
    line-height: 0.5em;
}

......它就在那里，看起来很棒，但是线高似乎没有。 “重要”这个词的大小是0.5em，但是行高与其他单词一样高，导致IS AN之后和“重要”之前的巨大空间。

我尝试过跨越内外的br，在“重要”的两边，如

 THIS<br>IS AN<span class="important"><br>important<br></span>SENTENCE<br>

...但我似乎无法获得行高。我究竟做错了什么？

Answer 1

这是使用的标记的副作用。用块级容器替换换行符（<br>）以实现所需的行为（将单词堆叠在一起），例如：

<div>THIS</div>
<div>IS AN</div>
<div class="important">important</div>
<div>SENTENCE</div>

您也可能会丢失line-height声明，因为它不再有用：

body {
    font-size: 8em;
}
.important {
    font-size: 0.5em;
}

注意：您可以使用任何块级元素，例如div个容器或p个元素。段落在语义上更合适，但你应该知道应用于它们的任何默认样式，例如厚填充，底部边距等。

Answer 2

线高是精确控制的一个棘手的事情，因为不同浏览器和操作系统解释计算方式的变化。 Adam Twardoch在webfonts.info上写了关于line height varies with browsers的内容，其中working with line-height还有一个更为通用的内容。

行高控制并非真正用于更多“图形”布局，而是用于设置清晰段落的设计器工具箱的一部分。正如Eliran所说，使用块元素来实现您的目标。这样您就可以更准确地控制定位。

Answer 3

我不知道这是否是最合适的方式，但是我已经成功地为文本提供负边距而不是调整行高。

Answer 4

我通常更喜欢<p>来调整行高。尝试这样的事情：

CSS：

p.important
{
    font-size: 0.5em;
    line-height: 0.5em;
}

HTML：

THIS<br>IS AN<br><p class="important">important</p><br>SENTENCE<br>