button with display:block not stretched

You can add padding to div container, and remove horizontal margin from buttons. Then you can apply width 100% to them:

<!DOCTYPE>
<html>
<head>
    <title>TEST</title>
    <style>
        button {
            display: block;
            width:100%;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div style="width: 100px; border: 1px solid black; padding:0 10px;">
        <button>hello</button>
        <button>hi</button>
    </div>
</body>
</html>​

Demo: http://jsfiddle.net/xwt9T/1/


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

Tags:

Html

Css

Recent Posts