gpt4 book ai didi

html - 将文本周围的填充减少到零以下

转载 作者:太空宇宙 更新时间:2023-11-04 14:50:56 25 4
gpt4 key购买 nike

举个例子:

https://jsfiddle.net/uq57mn0a/

...有一个简单的元素如下:

<span style="font-size:40px; font-weight:bolder; padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; border: 1px solid black; border-radius: 5px; background-color:#aaf">AB 123</span>

我想减少文本顶部和底部的填充量,即减少彩色背景。

但是我已经处于最小填充(零)并且变为负数没有任何作用。我能做什么?

最佳答案

你可以调整 line-height 并使元素成为 inline-block

span {
font-weight: bolder;
padding:0 10px;
display:inline-block;
border: 1px solid black;
border-radius: 5px;
background-color: #aaf;
line-height: 0.7em /* 0.7 * font-size */
}
<span style="font-size:40px">AB 123</span>
<span style="font-size:30px">AB 123</span>
<span style="font-size:20px">AB 123</span>

使用另一种字体:

span {
font-family:arial;
font-weight: bolder;
padding:0 10px;
display:inline-block;
border: 1px solid black;
border-radius: 5px;
background-color: #aaf;
line-height: 0.7em; /* 0.7 * font-size */
}
<span style="font-size:40px">AB 123</span>
<span style="font-size:30px">AB 123</span>
<span style="font-size:20px">AB 123</span>

关于html - 将文本周围的填充减少到零以下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52220999/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com