1px Solid Border Bottom включает заполнение при явном вводе текста шириной 0?

Question

У меня сложилось впечатление, что если элемент имеет заданную высоту и ширину 0, заполнение не будет увеличивать ширину / высоту, если для размера поля также задано поле рамки, дело в том, что это похоже на в таком случае, но как только я добавлю сплошную границу размером 1 пиксель, будет применено заполнение.

div#search > form#sform > a { display: inline-block; width: 20%; }

input#q { width: 80%; display: inline-block; border: 0px; }

div#search > form#sform > a { display: inline; width: 20%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' style='width:100%;height:100%' viewBox='0 0 70 70'%3E%3Cg class='base'%3E%3Cg fill='none' fill-rule='evenodd' class='main-fill'%3E%3Cpath d='M33.765 17.294C26.725 17.294 21 23.02 21 30.06c0 7.04 5.725 12.765 12.765 12.765 1.876 0 3.657-.416 5.263-1.146l6.266 9.793c.383.663.871 1.235 1.647 1.235 1.202 0 2.059-.818 2.059-2.059.007-.347-.225-.911-.412-1.235l-6.305-9.857a12.726 12.726 0 0 0 4.246-9.496c0-7.04-5.724-12.765-12.764-12.765zm0 1.647c6.15 0 11.117 4.968 11.117 11.118s-4.967 11.117-11.117 11.117A11.105 11.105 0 0 1 22.647 30.06c0-6.15 4.968-11.118 11.118-11.118z' class='main-fill'/%3E%3C/g%3E%3C/g%3E%3Cstyle%3E.main-fill%7Bfill:%23fff%7D%3C/style%3E%3C/svg%3E"); padding: 13px 10%; background-repeat: no-repeat; background-color: #a03f6e; -webkit-background-size: 50px 50px; -moz-background-size: 50px; -o-background-size: 50px; background-size: 50px; background-position: center center; margin: 0px; height: 40px; position: relative; top: 10px; left: 0px; }

div#search { position: absolute; top: 125px; left: 0; right: 0; margin: auto; width: 100%; max-width: 1200px; z-index: 15; background-color: white; height: 40px; }

div#search:focus, div#search:focus-within { outline: 1px solid #dadada; }

div#search input#q { width: 80%; display: inline; border: 0px; height: 40px; padding-left: 6px; float: left; height: 0px; width: 0px; padding: 0px; padding-left: 10px; border-bottom: 1px solid #aaa; font-size: 20px; font-family: 'Montserrat'; text-align: center; -webkit-box-shadow: inset 0 0 20px 20px white; -moz-box-shadow: inset 0 0 20px 20px white; box-shadow: inset 0 0 20px 20px white; -webkit-transition: 0.2s all ease-in; -o-transition: 0.2s all ease-in; -moz-transition: 0.2s all ease-in; transition: 0.2s all ease-in; }

div#search input#q:focus { outline-offset: 1px; }

input#q:focus { font-weight: 600; color: #444; -webkit-transition: 0.2s all ease-in; -o-transition: 0.2s all ease-in; -moz-transition: 0.2s all ease-in; transition: 0.2s all ease-in; }

div#search input#q::-webkit-input-placeholder { font-size: 14px; }

div#search input#q:-moz-placeholder { font-size: 14px; }

div#search input#q::-moz-placeholder { font-size: 14px; }

div#search input#q:-ms-input-placeholder { font-size: 14px; }

div#search input#q::-ms-input-placeholder { font-size: 14px; }

div#search input#q::placeholder { font-size: 14px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search">
        <form action="#" method="get" id="sform" name="sform">
          	<input id="q" type="text" placeholder="Search...">
             <a onclick="if ($('#search input#q').val().length > 3) {document.sform.submit()}else if($('input#q').width() == 0){$('#search input').height('40px').animate({width:'80%'},350);}else{$('#search input').focus();}" rel="nofollow"></a>
        </form>
      </div>

Поставьте галочку вкл / выкл границы внизу на входе и посмотрите, будет ли заполнение / не применено заполнение

Я схожу с ума или это должно произойти? Я имею в виду, лично я бы подумал, что это будет наоборот, отступы позволяют границы.

Также, если это поможет, Chrome 68 Win10.