[前端][HTML+CSS]button标签文本位置问题

Question

问题遇到的现象和发生背景

自己尝试写轮播，遇到的button标签问题，如图，加入文本1、2后对应的按钮“飞”了。

问题相关代码，请勿粘贴截图

-----所用样式
/* 按钮所在的DIV 类 */

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .show{
            border-color: #43edff;
            border-width: 1px;
            border-style: solid;
            border-radius: 10px;
            width: 500px;
            height: 312px;
            position: relative;
            background-color: #00FFFF;
            margin-left: 500px;
            margin-top: 100px;
            overflow-x: hidden;
        }
        #carousel{
            /* background-color: #9bafbc; */
            width: 3000px;
            height: 312px;
            font-size: 0px;
            position: absolute;
            left: 0px;
        }
        #carousel > img{
            border-radius: 10px;
        }
        /* 按钮所在的DIV 类 */
        .button{
            position: absolute;
            right: 10px;
            bottom: 5px;
            width: 100px;
            height: 20px;
            background-color: rgba(255,255,255,1);
            z-index: 10;            
        }
        /* 按钮所用 类 */
        .icon{
            border-radius: 50%;
            height: 20px;
            width: 20px;
            border-color: #1B6D85;
            border-style: solid;
            border-width: 1px;
            font-size: 1px;
            
            line-height: inherit;
        }
    </style>

--对应的页面代码

<div class="show">
        <div id="carousel">
            <img src="./img/redtravel/广安市邓小平故里.jpg" alt="" id="img1">
            <img src="./img/redtravel/延安革命纪念馆.jpg" alt="" id="img2">
            <img src="./img/redtravel/歌乐山烈士陵园.jpg" alt="" id="img3">
            <img src="./img/redtravel/瑞景共和国摇篮景区.jpg" alt="" id="img4">
            <img src="./img/redtravel/西柏坡.jpg" alt="" id="img5">
            <img src="./img/redtravel/遵义会议会址.jpg" alt="" id="img6">
        </div>
        <div class="button">
            <button type="button"  class="icon">1</button><button type="button"  class="icon">2</button><button type="button"  class="icon"></button><button type="button"  class="icon"></button><button type="button"  class="icon"></button>
        </div>
    </div>    

运行结果及报错内容

无报错，如图一。
希望有人能解答，感谢不尽。

Answer 1

你题目的解答代码如下：

        /* 按钮所用 类 */
        .icon{
            border-radius: 50%;
            height: 20px;
            width: 20px;
            border-color: #1B6D85;
            border-style: solid;
            border-width: 1px;
            font-size: 1px;
            line-height: inherit;
            vertical-align: top; /*加上这个*/
        }

如有帮助，望采纳！谢谢!