CODEWITHSUNDEEP
htmlcss
darkhorse
darkhorse

Reputation: 8782

Why does the same line-height affect links and buttons differently in CSS?

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">&times;</a>
<br /><br />
<button class="close">&times;</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

Answers (1)

Hao Wu
Hao Wu

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">&times;</a>
<br /><br />
<button class="close">&times;</button>

Upvotes: 1

Related Questions