我原以为这个问题与line-height
、padding
、margins
、display
等有关.我原以为可能与父元素有关,但结果是字体创造了空间!
有没有办法移走或调整这个空间?
不过,我真正想做的是让它垂直居中.正如你在第一张图片中看到的,它没有垂直地居中对齐.
我在这里创建了一个Codesen:https://codepen.io/kanekekoa/pen/GRPeBXz
:root {
--accent: #db1959;
--accent-2: #8eb2a6;
--accent-4: #f4fbfe;
--accent-5: rgba(210, 215, 198, 0.2);
--hb-pink: #db1959;
}
body {
background-color: var(--hb-pink);
}
a {
text-transform: none;
font-size: 18px;
line-height: 1.5;
word-wrap: break-word;
box-sizing: inherit;
text-decoration: none;
align-items: center;
justify-content: center;
padding: 15px 20px;
border-radius: 15px;
display: inline-flex;
font-weight: 700;
transition: all 0.5s ease;
background-color: var(--accent-4);
color: var(--accent);
}
#fancy-font {
font-family: Noto Sans Javanese, sans-serif;
}
<a id="fancy-font" href="#">Give us a shout!</a>
<a id="simple-font" href="#">Give us a shout!</a>