如何在HTML&CSS中缩小文字元素可点击区域并调整间距？

问题根源 #

你碰到的两个问题都和默认样式有关：

• 文字"A"上下的空白可点击区域：来自<p>标签的默认边距，以及字体自带的默认line-height（通常大于字体尺寸）
• 两行文本的多余间距：同样是<p>标签默认的margin属性导致

修复步骤 #

1. 精简HTML结构

删掉不必要的<p>标签，<a>标签可以直接包裹文本，<p>的默认样式会引入额外空白：

<div class="top-bar_content">
    <div class="logo">
        <a href="#" class="A_1">A</a>
        <a href="#" class="A_2">Second Row</a>
    </div>
</div>

2. 调整CSS样式

通过设置line-height与font-size相等消除文字上下空白，同时用Flex布局精准控制两行间距：

.logo {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 自定义两行之间的间距，按需修改数值 */
}

.A_1 {
    display: inline-block;
    line-height: 80px; /* 和font-size保持一致，消除文字上下的空白区域 */
    color: rgb(0, 0, 0);
    font-family: "Lora", serif;
    font-size: 80px;
    font-weight: 600;
    text-decoration: none;
}

.A_2 {
    color: rgb(255, 0, 0);
    font-family: "Lora", serif;
    font-size: 80px;
    font-weight: 600;
    text-decoration: none;
}

核心逻辑说明 #

• line-height: 80px：让行高严格匹配字体大小，使<a>的可点击区域完全贴合文字的上下边界
• 移除<p>标签：彻底清除<p>默认的上下外边距带来的多余间距
• Flex布局的gap属性：比margin更直观地控制两行文本的间距，避免样式冲突

内容的提问来源于stack exchange，提问作者ingver