Html 影响跨度位置的输入边界为什么？

我知道如何解决这个问题，请阅读评论，我正在寻找我为什么会有这个问题，这很奇怪

请阅读样式代码中的注释

问题：我有一个奇怪的问题，输入边框宽度影响div的位置，例如，如果我给输入边框宽度5px；相对于父级，span将在5px之后开始，如果我为输入指定边框宽度10px，span将在其父级div的10px之后开始？？这有点消耗，可能是我错过了一些明显的东西

以下是代码片段

.mainDiv{
显示器：flex；
}
输入{
身高：100%；
/*要改变现状，就要理解问题
只需更改边框宽度*/
边框：10px纯蓝色；
}
div div{
边框：2件纯黑；
高度：30px；
/*我可以通过显示这个来解决它
容器也是flex容器*/
}
跨度{
边框：2倍纯红；
/*首先编辑并显示它们内联块
也给高度*/
显示：内联块；
高度：30px；
}

不好的

输入与空白之间存在水平间隙。如果删除元素之间的白色标记，则水平间隙将消失

  <input type="text" required><span>not good</span>

不好

---

父对象顶部和跨度顶部之间存在垂直间隙，因为元素在文本的基线处对齐。请注意输入的底部，在其边框内，以及跨度线的底部。

“我正在寻找为什么我首先会出现此问题”-因为您没有指定应执行的

垂直对齐，如果您想要不同高度的内联元素的不同对齐方式，而不是简单的默认对齐方式…好的，我将尝试实现您的解决方案，但同时更改span的样式代码，请look@CBroe谢谢我明白了，谢谢你的帮助首先我不明白你说的空白和基线是什么意思，比我理解，比我尝试实现你的解决方案，比我没有工作，我还编辑了span样式请看，现在我正在使用你的代码，这意味着现在没有空白，再次感谢看谢谢，我起初不理解第二部分，这是一个完整的答案，但我只能投一次而不是两次。