Although my previous response had some good points, it was ultimately incorrect.
I have now found the accurate solution for you, which lies in the subtle differences;
Here is your original jsFiddle code snippet;
<button title="Button1" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">file_download</i></button> <!-- notice the space between button and i elements -->
<button title="Button2" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">search</i><!-- What's this? -->
</button>
<button title="Button3" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">filter_list</i><!-- what's this? -->
</button>
The issue arises from working with inline elements like button
. Nesting content within these elements leads to different behavior. The empty spaces left within these elements can be rendered as whitespace by certain browsers, causing discrepancies in appearance.
To address this problem, there are 2 solutions available;
The straightforward approach; eliminate the whitespace from your code
<button title="Button1" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">file_download</i></button>
Alternatively, a more complex but robust method involves utilizing comments to remove effective html whitespace and ensure stability in case of code reformatting;
<button title="Button1" class="btn btn-outline-secondary btn-icon"><i class="material-icons">
file_download
</i><<!-- These comments remove the effective html whitespace!!
--></button>
<button title="Button2" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">search</i><<!-- Because you are commenting them out!
--></button>
<button title="Button3" class="btn btn-outline-secondary btn-icon">
<i class="material-icons">filter_list</i><<!-- Amazing, isn't it?!
--></button>
This is why I tend to use div
elements styled as buttons to avoid such cross-browser inconsistencies related to inline elements.
-- Additionally, here is the JSFIDDLE link!
For further guidance on managing whitespaces with inline-block
elements, check out this resource.