asp图像按钮，单击时删除了CSS填充

Question

我有一个ASP图像按钮，旁边有一个ASP LinkBut​​ton。我给Linkbutton一个1％的填充，给它一些空间。休息时看起来像这样：

然而，当我单击图像时，填充被移除，因此它看起来像这样：

单词的移动在页面上非常明显，是否有属性或我遗漏的任何内容以防止这种情况发生？

相关的HTML和CSS：

<div class="flex-container flex-align-center">
     <asp:LinkButton runat="server" ID="userNameHeaderLbl" CssClass="nonAnimatedLink allowPointer contentMargin" Text="Not Signed In" OnClick="profileBtn_Click" ClientIDMode="Static" ></asp:LinkButton>
     <asp:ImageButton runat="server" ID="headerProfileBtn" ImageUrl="/Resources/Icons/03-Profile.png" CssClass="allowPointer" OnClick="profileBtn_Click" ClientIDMode="Static" />
</div>

.flex-container {   
    display: flexbox; 
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

}
.flex-align-center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.nonAnimatedLink {text-decoration:none; color:white;}
.nonAnimatedLink:hover {text-decoration:none}

.contentMargin {padding:1%;}