如何避免标签中的行间距，包括换行符

Question

我们正在开发一个使用HTML5和CSS的网络应用程序。

在我们的面具上，我们获得了包含单行和多行文本的标签。

对于多行，我们在文本中使用br-tag。

因为我们有时甚至在文本中使用子标记用于下标字符，所以我们被迫使用＆＃34; display：inline＆＃34;或＆＃34;显示：内联块＆＃34;标签样式。

现在我们来解决问题：＆＃34;显示：内联＆＃34;导致带有多行文本的标签中的行间距。

CSS可以避免使用这些线条，以便所有标签 - 如果它们具有单行或多行文字并不重要 - 具有相同的外观 - 包括顶部填充。

与此同时，我们尝试使用＆＃34; display：inline-block＆＃34;。

如果是多线标签，它可以正常工作，顶部填充（在我们的例子中为1px）甚至看起来很好。

但是在单行标签中，它会产生更大的顶部填充（通过属性，它与其他标签的1px一样），看起来像2或3像素。

这里有一个行为的图片，并有一些解释：

目标是：

• 获得相同的视觉填充（1px）
• 使用display：inline-block后，多行文本不再有不需要的行间距，但它们的文本行似乎粘在了一起。这不应该。似乎将1px添加到现有的行高可以解决这个问题。

任何帮助都将不胜感激。

这是我们的实际CSS：

channel.exchangeDeclare(Exchanges.PROCESSING.getType(), BuiltinExchangeType.TOPIC);

我们的两个标签。 第一个是多行文本，第二个是单行文本：

// Our pages contains some divs as containers structured like a table.
// Even the controls like the label are in div-containers for vertical alignment of the label content.
.Row{
    display: table; height: calc(100%); width: calc(100%);
}
// CellOuter and CellInner are the classes for the containers in which our controls are.
.CellOuter{
    display: table-cell; padding: 0; position: absolute !important;
}
.CellInner{
    display: table-cell; padding: 0; position: relative !important;  
}
// These style-classes are for horizontal and vertical alignment.
.TopLeft{
    text-align: left; align-items: flex-start; vertical-align: top; 
}
.TopCenter{
    text-align: center; align-items: center; vertical-align: top;   
}
 .TopRight{
    text-align: right; align-items: flex-end; vertical-align: top;  
}
 .MiddleLeft{
    text-align: left;
    align-items: flex-start;
    vertical-align: middle;
}
 .MiddleCenter{
    text-align: center; align-items: center; vertical-align: middle;
}
 .MiddleRight{
    text-align: right; align-items: flex-end; vertical-align: middle; 
}
 .BottomLeft{
    text-align: left; align-items: flex-start; vertical-align: bottom;  
}
 .BottomCenter{
    text-align: center; align-items: center; vertical-align: bottom;
}
 .BottomRight{
    text-align: right; align-items: flex-end; vertical-align: bottom; 
}

Answer 1

谢谢大家的支持。

经过长期的斗争，我们找到了解决问题的方法。

通过使用display：inline-block，只有左边和顶部的填充和边距有效，但不是顶部或底部。

为此，我们必须使用display：table。

display：table几乎具有display的所有功能：inline-box和所有定义的边距和填充都是有效的。