我给人的印象是，如果元素的高度和宽度设置为0，则如果box-sizing也设置为border box，则填充不会推动width / height，事实是，这似乎是确实是这样，但是一旦我添加了1px的实线边框，便会应用填充。
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。