英文:
Is there a possibility to decrease the clickable area of an item in HTML&CSS
问题
I have been trying to reduce the clickable area on the website logo in my header. For example, let's suppose my website logo would be "A" in plain clickable text, and below that, a second row of text, which is also clickable. The result I get is that there is about 10% empty space on top and on the bottom of the letter, which is itself clickable. In addition, I want to add a second row of text right after the "A," and as I do so, the text below the letter "A" is placed 10% lower than it should be (with there being an empty gap between these two items).
Just to clarify: I would like the clickable box on top of the letter "A" to be exactly the width and height of the letter.
英文:
I have been trying to reduce the clickable area on website logo on my header. For example - lets suppose my website logo would be "A" in plain clickable text, and below that, a second row of text, which is also clickable. The result I get is that there is about 10% empty space on top and on the bottom of the letter, which is itself clickable. Addition to that, I want to add a second row of text right after the "A", and as I do so, the text below the letter "A" is placed 10% lower than it should be (with there being an empty gap between these two items).
Just to clarify: I would like the clickable box on top of letter "A" to be exactly the width and height of the letter.
HTML:
<!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 specific for "logo" as follows:
/*.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;
}
I have tried:
A_1 {
display: inline-block;
}
and setting a custom witdh and height to the letter "A" with no avail.
答案1
得分: 0
Update: managed to solve the problem myself. I fixed the letter's width and height by doing the following.
.A {
color: rgb(0, 0, 0);
font-size: 90px;
display: flex;
align-items: center;
height: 66px;
width: 100%;
overflow: hidden;
}
英文:
Update: managed to solve the problem myself. I fixed the letter's width and height by doing the following.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.A {
color: rgb(0, 0, 0);
font-size: 90px;
display: flex;
align-items: center;
height: 66px;
width: 100%;
overflow: hidden;
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论