CODEWITHSUNDEEP
htmlinput
user2860957
user2860957

Reputation: 476

Input border effecting the position of span why?

I know how to solve the problem, read the comment Please, I am looking why i have this problem in the first place, it just weird,

Please read the comment in the style code

Problem : I have this weird problem that, input border width is effecting the position of div, for example if i gave border width 5px to input; span will start after 5 px in relation to the parent, and if i give border width 10px to input span will start after 10px from it's parent div?? it kinda consuting, may be i am missing some thing obvious,

Here is the code snippet

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

Upvotes: 2

Views: 166

Answers (1)

Samuel Neff
Samuel Neff

Reputation: 74909

There is a horizontal gap between the input and the span from whitespace. If you remove the whitepsace between the elements, that horizontal gap goes away.

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

There is a vertical gap between the top of the parent and the top of the span because the elements are aligned at the baseline of the text. Notice the bottom of the input, inside its border, and the bottom of the span line up.

Upvotes: 2

Related Questions