Question

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

请阅读样式代码
中的注释

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

以下是代码段

.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>

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

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

1 个答案: