Высота группы кнопок не соответствует входному сигналу

Question

У меня есть группа ввода начальной загрузки, а моя кнопка справа от моего ввода не соответствует высоте. Я просмотрел примеры на getbootstrap, и я не вижу, что я делаю неправильно. Как я могу получить высоту своей кнопки, чтобы она соответствовала моему вводу текста? Ниже приведен html, который я использую, и снимок экрана, показывающий разницу в высоте. Я получаю тот же результат на светлячок 33,1 и хром 38.

<div class="col-xs-12 col-sm-8 text-left id-form-data"> 
<form id="partsearch" method="GET" action=""> 
<div class="input-group" style="width:200px;"> 
<input type="text" class="form-control" name="partNumber" id="partNumber" placeholder="Part#" maxlength="12" required> 
<span class="input-group-btn"> 
<button type="submit" class="btn btn-success"> 
<span class="glyphicon glyphicon-chevron-right"></span> 
</button> 
</span> 
</div> 
</form> 
</div> 

Answer 1

путем добавления NBSP; рядом с моим глифом, он решил мою проблему.

<button type="submit" class="btn btn-success"> 
&nbsp;<span class="glyphicon glyphicon-chevron-right"></span> 
</button> 

Answer 2

Другие ответы вставки пробел. Вместо этого используйте совершенно невидимый символ: ‌. Это имеет тот же эффект:

<button type="submit" class="btn btn-success"> 
&zwnj;<span class="glyphicon glyphicon-chevron-right"></span> 
</button> 

Подробнее об этом здесь Invisible Delimiter for Strings in HTML