бутстрап 3 входа внутри div прыгает

Question

У меня проблема с bootstrap css.

В скрипке просто введите что-то на вход, а затем вставьте несколько пикселей ... ПОЧЕМУ?

<div class="test"><input type="text" value="ABC"></div> 

.test { height:86px; overflow:hidden; border:solid #000 3px; } 
.test input { height:74px; margin:8px 0 0 6px; font-size:74px; } 

---

Так что я хочу использовать маржинальный-топ или Somthing еще позиционированию понизить вход внутри Outter DIV

screenshot

<div class="test"><input type="text" value="ABC"></div> 
.test { height:86px; overflow:hidden; border:solid #000 3px; } 
.test input { height:74px; margin-top:20px; font-size:74px; } 

New fiddle

Answer 1

Это не ясно но он лучше выглядит с этим:

Css:

.test { height:86px; overflow:hidden; border:solid #000 3px; } 
.test input { height:86px; margin:0; font-size:74px; padding-bottom: 10px;} 

Fiddle: https://jsfiddle.net/ja8mymtr/1/

Answer 2

Это немного странно, но вы можете это исправить, используя абсолютное положение, как этот

.test { 
 
    height:86px; 
 
    overflow:hidden; 
 
    border:solid #000 3px; 
 
    position: relative 
 
} 
 
.test input { 
 
    height:74px; 
 
    margin:8px 0 0 6px; 
 
    font-size:74px; 
 
    position: absolute; 
 
    bottom:0 
 
}

<div class="test"> 
 
    <input type="text" value="ABC"> 
 
</div>

Answer 3

... вход впрыскивает несколько пикселей ... ПОЧЕМУ?

После многих беспорядков я, наконец, обрушился на вопрос, фу.

Вы установили overflow свойство контейнера div на hidden. Но, внутреннее содержимое этого div, имеет больше height, чем родительский (с подсчетом поля и размер шрифта ввода).

Благодаря чему, когда пользователь вводит что-то во входном элементе, браузер пытается центрировать элемент по scrolling к нему, его только, что мы не можем видеть его.

И поэтому мы видим «прыжок».

DEMOс полосой прокрутки показанной, для дальнейшей демонстрации того, что происходит.

Так что я хочу использовать Верхнее поле для позиционирования опустить вход внутри внешнего DIV, избегая при этом скачок

Вы можете уменьшить font-size и line-height к чему-то может заставить входной элемент плотно прилегать к контейнеру, сохраняя при этом поля.Что-то вроде this.