时间戳

首页 > 解决方案 > 我的 h1 元素的文本比元素的实际高度短。我可以删除空白空间吗？

html - 我的 h1 元素的文本比元素的实际高度短。我可以删除空白空间吗？

问题描述

我有一个<h1>具有以下类的元素：

.product-name {
  font-size: 36px;
  font-weight: 600;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
<h1 class="product-name">My awesome product </h1>

文本呈现如下：

电流输出

如您所见，文本上方和下方都有一些空白区域。我正在努力实现这一目标：

期望的输出

这是可以实现的吗？

标签： htmlcss

解决方案

我想你是这个意思。我添加了line-height: 1;

.product-name {
    font-size: 36px;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
    line-height: 1;
    margin-bottom: 20px;
    display: inline-block;
}
<h1 class="product-name">Aadaadf</h1>

推荐阅读