Reputation: 8782
I have a class for a button which can be used on links and buttons. Unfortunately, in spite of using the the exact same styles, the 2 elements look different.
.close {
width: 36px;
height: 36px;
border: 0;
background-color: #ecf0f1;
line-height: 36px;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 22px;
color: black;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border-radius: 50%;
}
<a href="#" class="close">×</a>
<br /><br />
<button class="close">×</button>
As you can see, the button's cross is not centered vertically. It goes slightly below the x-axis. What is the reason for this? And how can I fix this? Thanks for any help.
BTW, I am using MacOS, so the -apple-system
font is being used in my computer.
Upvotes: 0
Views: 660
Reputation: 20953
button
and a
tags have some predefined properties that might affect the appearance.
If you want them to look universal, try adding all: initial
at the beginning of the style. This will get rid of all the predefined styles by the browser.
.close {
all: initial;
cursor: pointer;
width: 36px;
height: 36px;
border: 0;
background-color: #ecf0f1;
line-height: 36px;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 22px;
color: black;
-webkit-text-fill-color: currentColor;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border-radius: 50%;
}
<a href="#" class="close">×</a>
<br /><br />
<button class="close">×</button>
Upvotes: 1