Anchor and button elements render differently with same styles

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

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

Anchor tags and button have different inherent styles. That makes it render differently. Use flex: 1/2 or something similar to achieve it — Rajesh Paudel, Dec 10 '21 at 06:44
@RajeshPaudel in this situation `a` or `button` is a flex container. On what element should I use `flex: 1/2`? — 1nspir3, Dec 10 '21 at 06:48
Sorry I meant to say you need to use flex: 1/2 if it's inside. But this behaviour is mainly due to two box sizing. Content box and border box. — Rajesh Paudel, Dec 10 '21 at 06:54
If it was box-sizing, then setting it to one or another value would help. But sadly, it's not :( — 1nspir3, Dec 10 '21 at 06:59
`flex` should be set on container, Setting on individual children is pointless. — Mat J, Dec 10 '21 at 10:54
Perhaps this will shed some light https://stackoverflow.com/questions/35464067/flex-grid-layouts-not-working-on-button-or-fieldset-elements — Huangism, Dec 10 '21 at 16:31
@MatJ the OP is setting flex to the parent, the text in the anchor for example is the flex item — Huangism, Dec 10 '21 at 16:32

pso · Answer 1 · 2021-12-13T00:20:08.097

0

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 href="#">asdf</a>
<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;
}

edited Dec 13 '21 at 00:20

answered Dec 10 '21 at 06:53

pso

513
1
16

This isn't the same thing really – Huangism Dec 10 '21 at 16:28
Care to explain why @Huangism – pso Dec 13 '21 at 00:18
Your button is a flex item where OP's button is meant to be flex container – Huangism Dec 13 '21 at 14:22
Right, well, they didn't specify that it needs to be a flex container. – pso Dec 14 '21 at 02:23

score 0 · Answer 2 · answered Dec 10 '21 at 06:56

0

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>

answered Dec 10 '21 at 06:56

MagnusEffect

3,363
1
16
41

The OP asks for when the anchor and button are display flex, not as flex items – Huangism Dec 10 '21 at 16:41
That is true but c'mon, it is quite obvious in the question, comparing anchor vs button when both are flex container – Huangism Dec 14 '21 at 14:10

score 0 · Answer 3 · edited Dec 10 '21 at 16:39

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

Not seeing a difference on chrome on a mac – Huangism Dec 10 '21 at 16:39 — Huangism, Dec 10 '21 at 16:39

score 0 · Accepted Answer · answered Dec 10 '21 at 07:22

0

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!

answered Dec 10 '21 at 07:22

1nspir3

41
3

Is this intended to be an answer? If so, please demonstrate more clearly what worked. – isherwood Dec 10 '21 at 16:29

Anchor and button elements render differently with same styles

4 Answers4