Anchor and button elements render differently with same styles-CodePudding

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;
}

<a href="#">asdf</a>
<button>asdf</button>

CodePudding user response：

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>
  <a href="#">asdf</a>
  <button>asdf</button>
</div>

CodePudding user response：

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!

CodePudding user response：

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.

a,
span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background: orange;
  margin-bottom: 20px;
  padding: 10px;
  height: 50px;
  margin: 0;
}

<a href="#">asdf</a>
<span><button>asdf</button></span>

CodePudding user response：

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 >
  <a href="#">asdf</a>
  <button>asdf</button>
</div>