Anchor and button elements render differently with same styles - html

Question

As title says-
I'm setting anchor and button to flex but their sizes are different.
Why does this happen? How can I achieve same visual on both elements with auto width?
a,
button {
display: flex;
align-items: center;
justify-content: center;
width: auto;
background: orange;
margin-bottom: 20px;
padding: 10px;
height: 50px;
margin: 0;
}
asdf
<button>asdf</button>

Answer 1

Here, in `width:auto`, auto tells the default value. The browser calculates the width.
Also both are different elements.
div {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
a,
button {
width: auto;
background: orange;
padding: 30px;
margin: 0;
}
a {
padding-bottom:31px;
}
<div>
asdf
<button>asdf</button>
</div>

Answer 2

My problem consists of 2 parts:
button and a render differently
I wanted a to render like button in this example. So the component I'm designing will not make its users to wrap it and so on and so forth.
The correct answer is arround width property set to fit-content. It has pretty good browser support and I'll try to use it.
Thanks a lot for your answers!

Answer 3

This depends on the engine but the most probable cause of this in browsers is due to the box-sizing property of css. MDN defines box sizing as
By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height, you have to adjust the value
you give to allow for any border or padding that may be added. For
example, if you have four boxes with width: 25%;, if any has left or
right padding or a left or right border, they will not by default fit
on one line within the constraints of the parent container.
You can read more about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing how using
But the closest you can reach is by using width as inherit. This will cause the elements to inherit width from parent.
// Resetting both to have same type for similar render
a,button {
box-sizing: content-box;
border: unset;
}
a,
button {
display: flex;
align-items: center;
justify-content: center;
background: orange;
margin-bottom: 20px;
padding: 10px;
height: 50px;
margin: 0;
}
// Add width to parent element
.w-100 {
width: 100vw;
}
// This will cause the default width behaviour to inherit from parent
a,button {
width: inherit;
}
<div class="w-100">
asdf
<button>asdf</button>
</div>

Answer 4

This problem arises from button not being allowed to have some of the other display properties depending on the engine. Wrapping button in a span is the easiest solution.
asdf
<span><button>asdf</button></span>
a, span {
display: flex;
align-items: center;
justify-content: center;
width: auto;
background: orange;
margin-bottom: 20px;
padding: 10px;
height: 50px;
margin: 0;
}