前端基础网页设计（网页导航）
问题：这个标签之间的间距如何取消？
我这里设置的是1px但是显示出来是0.8
以下是代码：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五彩导航</title>
<style>
span {
width: 120px;
height: 50px;
background-image: url("images/bg1.png");
display: block;
text-align: center;
line-height: 50px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: black;
font-weight: 700;
}
a {
text-decoration: underline;
display: inline-block;
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid #fff;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.one {
background-color: orange;
height: 50px;
}
.two {
background-color: green;
height: 50px;
}
.three {
background-color: blue;
height: 50px;
}
.four {
background-color: purple;
height: 50px;
}
.five {
background-color: greenyellow;
height: 50px;
}
a:hover {
background-color: yellow;
}
span:hover {
background-image: url("images/bg3.png");
background-repeat: no-repeat;
}
.p2 {
background-image: url("images/bg2.png");
}
.p3 {
background-image: url("images/bg6.png");
}
.p4 {
background-image: url("images/bg4.png");
}
.p5 {
background-image: url("images/bg5.png");
}
</style>
</head>
<body>
<h1>我的导航</h1>
<span>学习</span>
<div class="one">
<a href="https://nav.guidebook.top/xuexi" target="_blank">学习教育</a>
<a href="http://muchong.com/bbs/" target="_blank">小木虫论坛</a>
<a href="https://www.elecfans.com/" target="_blank">电子发烧友</a>
<a href="https://www.zhihuishu.com/" target="_blank">智慧树平台</a>
<a href="https://www.51zxw.net/" target="_blank">我要自学网</a>
<a href="https://cet-bm.neea.edu.cn/Index" target="_blank">英语四六级报名网</a>
<a href="https://www.yfzxmn.cn/index.jsp" target="_blank">银符考试网</a>
<a href="https://www.xue8nav.com/?ref=www.widiz.com" target="_blank">学吧导航</a>
</div>
<hr>
<span class="p2">编程</span>
<div class="two">
<a href="https://www.code-nav.cn/" target="_blank">编程导航</a>
<a href="https://cplusplus.com/reference/" target="_blank">C语言头文件官网</a>
<a href="https://zh.cppreference.com/w/%E9%A6%96%E9%A1%B5" target="_blank">中文C语言官网</a>
<a href="https://ac.nowcoder.com/" target="_blank">牛客竞赛网</a>
<a href="https://leetcode.cn/" target="_blank">力扣</a>
<a href="https://www.matiji.net/exam/" target="_blank">码蹄集</a>
</div>
<hr>
<span class="p3">兼职</span>
<div class="three">
<a href="https://www.codemart.com/" target="_blank">码市</a>
<a href="https://www.yuanjisong.com/" target="_blank">猿急送</a>
<a href="https://task.epwk.com/" target="_blank">一品威客</a>
<a href="https://zb.oschina.net/" target="_blank">开源众包</a>
<a href="https://www.proginn.com/" target="_blank">程序员客栈</a>
</div>
<hr>
<span class="p4">工具</span>
<div class="four">
<a href="http://www.hippter.com/" target="_blank">PPT模板导航</a>
<a href="https://www.excelbbx.net/Word.htm" target="_blank">Word精灵</a>
<a href="https://www.toolhelper.cn/Digit/FractionConvert" target="_blank">计算工具大全</a>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element" target="_blank">HTML大全</a>
<a href="https://cn.bing.com/translator/?h_text=msn_ctxt&setlang=zh-cn" target="_blank">bing翻译</a>
<a href="https://pyecharts.org/#/zh-cn/intro" target="_blank">pyecharts图表官网</a>
<a href="http://www.ab173.com/gongju/shouji/index.php" target="_blank">懒人工具</a>
<a href="https://www.bejson.com/" target="_blank">JSON格式转换</a>
</div>
<hr>
<span class="p5">GPT</span>
<div class="five">
<a href="https://wellmaxwang.com/#/chat/1685435143435" target="_blank">GPT官网</a>
<a href="https://14.c11r.cc/#/chat/1002" target="_blank">GPT2</a>
<a href="https://zosex.aitianhu.fit/#/chat/1691231672351" target="_blank">GPT3</a>
<a href="https://chatai.lra.cn/#/home/chat" target="_blank">GPT4</a>
<a href="https://chat1.wobcw.com/" target="_blank">GPT5</a>
</div>
</body>
</html>
求解，谢谢
原因是
<a>
之間有空格。
可以把 之間的空格刪除（全部連接起來），但不利於閱讀。
另外可以用這個：
div {
display: inline-flex;
}
css可以这样写就完成了
```css
span {
width: 120px;
height: 50px;
background-image: url("images/bg1.png");
display: block;
text-align: center;
line-height: 50px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: black;
font-weight: 700;
}
div {
display: flex;
height: 50px;
}
a {
width: 150px;
text-align: center;
line-height: 50px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid #fff;
}
h1 {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.one {
background-color: orange;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
.four {
background-color: purple;
}
.five {
background-color: greenyellow;
}
a:hover {
background-color: yellow;
}
span:hover {
background-image: url("images/bg3.png");
background-repeat: no-repeat;
}
.p2 {
background-image: url("images/bg2.png");
}
.p3 {
background-image: url("images/bg6.png");
}
.p4 {
background-image: url("images/bg4.png");
}
.p5 {
background-image: url("images/bg5.png");
}
```