vue+element ui 为什么文字上面有不明间距

使用了element ui的布局，这段代码在html页面是显示正确的，放到element ui中就出现了异常的上边距，有没有大佬遇到过这个问题？

aaa

        <hr align=center width=500px color=#987cb9 SIZE=1>
        <div class="infofont">
            <span class="fontx">aaa</span>
        </div>
        <hr align=center width=500px color=#987cb9 SIZE=1>
        <div class="infofont">
            <span class="fontx">aaa</span>
        </div>
        <hr align=center width=500px color=#987cb9 SIZE=1>
    </div>


```.info{
        border:2px solid #F00;
        width: 700px;
        padding: 0;
        margin: 0;
        height: auto;
    }
    .infofont{
        border:2px solid #01d40d;
        height: 30px;
        text-align: center;
        padding-top: 15px;
    }

参考GPT和自己的思路：

可能是因为元素的默认样式不同导致的。在Vue中，如果使用了Element UI的组件，会默认添加一些样式，可能会影响到原有页面的样式。建议可以使用浏览器的开发者工具检查一下具体的样式属性。可以尝试在对应的样式上增加一些额外的样式或者重置默认样式来解决问题。如有需要，也可以咨询Element UI的官方文档或者社区。