Why <a> and <button> tags with identical css properties look different?-CodePudding

The question is so simple I'm amazed I'm still struggling with this. In the snippet below I set the css properties so that when inspecting elements the computed css properties are identical for both a and button elements, but still the text alignment differs.

a,
button {
  appearance: button;
  box-sizing: border-box;
  background: orange;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 4px;
  border: none;
  font-size: 16px;
  font-family: serif;
  cursor: pointer;
  writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: black;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: center;
  align-items: flex-start;
  font-stretch: 100%;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-weight: 400;
  -webkit-border-image: none;
}

<button type="button">Click Me!</button>
<a type="button">Click Me!</a>

Is this difference due to some default property of one of the elements which is not visible in the computed css properties list? I've studied the MDN and W3Schools without finding the answer.

EDIT: I know how to align the texts (e.g., with line-height: 32px;) but I'm interested to know why the elements in the snippet differ. I changed the original question a bit to reflect this.

CodePudding user response：

Maybe is useful put button without default styles with all: unset and change display inline-block to flex element.

button,
a{
  all: unset;
  display: inline-flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  cursor:pointer;
  
  appearance: button;
  box-sizing: border-box;
  background: orange;
  height: 40px;
  margin: 0;
  padding: 4px;
  border: none;
  font-size: 16px;
  font-family: serif;
  cursor: pointer;
  writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: black;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: center;
  align-items: flex-start;
  font-stretch: 100%;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-weight: 400;
  -webkit-border-image: none;
}

<button>Click Button</button>
or
<a>Click Link</a>

CodePudding user response：

One way is to add display: inline-flex; flex-direction: column; justify-content: center; to the css rule to vertically center the text:

(P.S.: You can erase a lot of the other settings you added - see below - they have no effect here)

a,
button{
  box-sizing: border-box;
  background: orange;
  height: 40px;
  padding: 4px;
  border: none;
  font-size: 16px;
  font-family: serif;
  cursor: pointer;
  color: black;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}

<button type="button">Click Me!</button>
<a type="button">Click Me!</a>

CodePudding user response：

Taming `<button>` Styles

You have to strip both tags of their defaults, then add back the styles and behavior that you'd like to keep or change, like cursor: pointer or text-decoration: none.

There are default styles not reflected in the computed styles of certain form controls -- normalize.css addresses them with the following ruleset:

button,
input,
select,
optgroup,
textarea {
  font-family: inherit; 
  font-size: 100%; 
  line-height: 1.15; 
  margin: 0; 
}

The properties that make the button so difficult to control is font-family (they have their own non-standard one) and font-size (it doesn't conform to default). Unlike normal tags, buttons will not inherit the font properties unless they are given inherit explicitly.

Also, there is the appearance property which has many unlisted styles that are responsible for a button's border, rounded corners, gradient background, and that maddening behavior over font properties. The reason appearance: none isn't included is because it breaks when the button's font-size is changed.

There's one more property in the buttons that you should change is align-items: flex-start, While stripping down the anchor and the button, the button unexpectedly justified it's text to the left which is the same behavior as align-items: flex-start so I changed it to align-items: normal.

BTW, you might run into a problem with width if you set it explicitly (ex. 7rem, 20px, etc). For some reason I couldn't figure out why the <button> was significantly thinner than the <a>. I applied min-width: max-content to resolve that issue but I still don't know why the widths are so wacky.

html {
  font: 500 2ch/1.15 'Segoe UI'
}

.clk {
  /* Reset basic styles */
  margin: 0;
  padding: 0;
  border: 0;
  color: #000;
  background: none;
  /* Add/remove behavior and unique quirks */
  display: inline-block;
  align-items: normal;
  font: inherit;
  font-size: 100%;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  /* Build up styles */
  min-width: max-content;
  margin: 4px;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  /* Aesthetics */
  box-shadow: 
  rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, 
  rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, 
  rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  text-shadow: .06em .06em 0 hsl(200 50% 30%);
}

.clk:hover,
.clk:focus {
  background: rgba(2, 129, 255, 0.05);
}

.clk:focus {
  outline: 1px solid #0053ba;
  outline-offset: 4px;
  color: #0053ba;
}

.clk:active {
  transform: scale(0.99);
}

<a href='#' class='clk'>Link or Button?</a>
<button class='clk' type='button'>Link or Button?</button>

CodePudding user response：

remove height:40px and you should be all set

a,
button {
  appearance: button;
  box-sizing: border-box;
  background: orange;
  
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 4px;
  border: none;
  font-size: 16px;
  font-family: serif;
  cursor: pointer;
  writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: black;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: center;
  align-items: flex-start;
  font-stretch: 100%;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-weight: 400;
  -webkit-border-image: none;
}

<button type="button">Click Me!</button>
<a type="button">Click Me!</a>

Taming <button> Styles

Taming `<button>` Styles