button with display:block not stretched

Question

The initial defination of Button Layout was committed on 2019, which solved the rendering problem of button elements. https://github.com/whatwg/html/pull/4143.

we could refer to the HTML Living Standard to see an important rule of Button Layout as follows:

If the computed value of ‘inline-size’ is ‘auto’, then the used value is the fit-content inline size.

https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size

we should know that a block with inline-size:fit-content | max-content | min-content will shrink its width even if display:block.(by the way, width:fit-content | max-content | min-content does the same effect)

try this (require chrome 57+, but in FireFox 66+ we could try with inline-size:max-content):

<div style="
  inline-size: fit-content;
  background: linear-gradient(0deg, #ddd, #fff);
  padding: 2px 6px;
  border: 0.5px solid #bbb;
  font-size: 13px;"
>click me!</div>

view result

Leave a Comment Cancel reply