输入边界影响span的位置为什么？

Question

我知道如何解决这个问题，读请，我要找的评论，为什么我在首位这一问题，它只是奇怪，输入边界影响span的位置为什么？

请阅读样式代码

评论

问题：我有这个奇怪的问题，输入边框宽度影响div的位置，例如，如果我给边框宽度5px输入;跨度将开始在5倍相对于父，如果我给边界宽度10px输入跨度将从10px开始它的父div？它有点consuting，可能是我错过了一些东西明显，

这里是代码片段

.mainDiv { 
 
      display: flex; 
 
     } 
 
     input { 
 
      height: 100%; 
 
      /*To change understand the problem 
 
      just change the border width*/ 
 
      border: 10px solid blue; 
 

 
     } 
 
     div div { 
 
      border: 2px solid black; 
 
      height: 30px; 
 
      /*i can solve it by displaying this 
 
      container as flex container as well*/ 
 

 
     } 
 
     span { 
 
      border: 2px solid red; 
 
      /*First Edit Display them inline block 
 
      and also give height*/ 
 
      display: inline-block; 
 
      height: 30px; 
 
     }

<form action=""> 
 
      <div class="mainDiv">    
 
       <div> 
 
        <input type="text" required><span>not good</span> 
 
       </div> 
 
      </div> 
 
     </form>

Answer 1

有输入和空格跨度之间的水平差距。如果清除元素之间的白色斑点，那么横向间隙就会消失。

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

由于元素在文本的基线上对齐，因此父级顶部和顶级之间存在垂直间距。注意输入的底部，边界内部以及跨度的底部。