This article will introduce to you how to set the distance between CSS underline and text. Next, let’s take a look at the specific content.
In the previous article we introduced the setting method of css underline, but the set underline feels too close to the text, and sometimes it does not look good on the web page. Beautiful, so how to set the distance between the CSS underline and the text? This article will introduce to you how to set the distance between CSS underline and text.
The text underline set by the text-decoration attribute in css cannot adjust the distance between the text and the underline, so if we want to adjust the distance between the underline and the text, we can only use the border-bottom attribute to set the text Underline, let’s look at the specific implementation method.
The attributes we need to use to set the distance between the css underline and the text are padding-bottom and border-bottom
The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
span{
border-bottom: 2px solid pink;
padding-bottom: 10px;
}
</style>
</head>
<body>
<span>
php中文网下划线距离</span>
</body>
</html>The effect is as follows:
From the picture above, it can be easily seen that there is a certain distance between the text and the underline.
This article ends here. For more content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How to set the distance between css underline and text?. For more information, please follow other related articles on the PHP Chinese website!
switch statement usage
Ranking of foreign CDN service providers
What are the registration-free spaces in China?
What is ^quxjg$c
How to solve the problem that document.cookie cannot be obtained
How to close secure boot
What does STO mean in blockchain?
Solution to the problem that setting the Chinese interface of vscode does not take effect
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
