我一直在尝试减少网站徽标在我的标题上的可点击区域。例如-让我们假设我的网站徽标将是“A”在纯可点击文本中，下面是第二行文本，这也是可点击的。结果我得到的是，在字母的顶部和底部有大约10%的空白空间，这本身就是可点击的。除此之外，我想在“A”后面添加第二行文本，这样做时，字母“A”下面的文本比它应该的位置低10%（这两个项目之间有一个空白间隙）。
仅作澄清：我想在字母“A”顶部的可点击框正好是字母的宽度和高度。
超文本：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap"><!--CSS: font-family: "Lora", serif;-->
<link rel="stylesheet" href="test1.css">
<title>test</title>
</head>
<body>
<div class="top-bar_content">
<div class="logo">
<a href="#" class="A_1">
<p>
A
</p>
</a>
<a href="#" class="A_2">
<p>
Second Row
</p>
</a>
</div>
</div>
</body>CSS特定于“徽标”如下：
/*.logo {
display: flex;
flex-direction: column;
}*/
.A_1 {
/*display: inline-block;*/
/*padding: 5px 10px;*/
/*margin: 0px;*/
color: rgb(0, 0, 0);
font-family: "Lora", serif;
font-size: 80px;
font-weight: 600;
text-decoration: none;
}
.A_2 {
/*margin-top: -500;*/
color: rgb(255, 0, 0);
font-family: "Lora", serif;
font-size: 80px;
font-weight: 600;
text-decoration: none;
}我试过：
A_1 {
display: inline-block;
}并将自定义witdh和高度设置为字母“A”，但无济于事。
1条答案
按热度按时间hyrbngr71#
要减少网站徽标上的可单击区域，您可以尝试在徽标字母“A”周围的锚标记中添加padding和margin。这可以通过将padding和margin属性设置为特定值来实现。
例如，您可以尝试将以下CSS添加到“.A_1”类中：
这将在顶部和底部将填充设置为5个像素，在锚标记的左侧和右侧将填充设置为10个像素，从而有效地减少了字母“A”周围的可单击区域。边距设置为0以消除锚标记周围的任何不需要的空间。
要在“A”后面添加第二行文本，您可以在锚标记内添加另一个段落标记，如下所示：
要调整第二行文本的位置，您可以向第二个段落标签添加一些CSS，如下所示：
这会将第二个段落标签向上移动10个像素，以消除两个段落之间差距。
欢迎来到stack overflow！