1

I've seen these non-duplicate questions:

Input with display:block is not a block, why not?

Actual Question:

"How do I get the input to fill the width?"

button with display:block not stretched

Actual Question:

"stretch to 100% width if their display is block. How to achieve this?"

Both of these questions might have been duplicates if the title was the actual question they asked, but in both cases, the question title and actual question are mismatched.

I'm asking specifically:

Why do buttons act different? What exactly is it that makes buttons not grow to 100% width when given display:block?

button, span {
  display: block;
  background: #FAF;
}
<button>Hey</button>
<span>Hi</span>
Seph Reed
  • 8,797
  • 11
  • 60
  • 125
  • `input` widths are determined by the `size` attribute. If you do not add one, it defaults to 20. – APAD1 Jul 22 '19 at 21:14
  • Is this the same for buttons? I made a mistake and equated inputs to buttons after reading the first linked question. – Seph Reed Jul 22 '19 at 21:16
  • For buttons, the size is determined by it's text content by default. – APAD1 Jul 22 '19 at 21:18
  • Is there some form of css property that does this? Makes a thing only as wide as its text when its display is block? – Seph Reed Jul 22 '19 at 21:19
  • button are very special element and there is a lot of stuffs handled by the browser/OS – Temani Afif Jul 22 '19 at 21:21
  • Okay. So it's kind of a mystery styling property that is not accessible in user land? – Seph Reed Jul 22 '19 at 21:22
  • not exactly a *mystery* but complex behavior around such elements. See the duplicate for more details – Temani Afif Jul 22 '19 at 21:27
  • https://stackoverflow.com/questions/57154038/can-i-make-a-div-shrink-to-text-width-like-a-button#57154085 The mystery is `width: fit-content;` – Seph Reed Jul 22 '19 at 21:45
  • But changing the button to width:auto does not make the button full block width. Buttons are still mysterious. Also changing inline-size doesn't do it either. – Curtis Mar 30 '20 at 03:42

1 Answers1

0

Elements have default styles applied to them. Just like <div> is block be default and <span> is inline. You must explicitly set the width of <input> or <button> if you'd like them to be 100%.

<input style="background-color: red" />
<input style="background-color: blue" />

<br>
<br>

<input style="display: block; background-color: red" />
<input style="display: block; background-color: blue" />


<br>
<br>

<input style="display: block; width: 100%; background-color: red" />
<input style="display: block; width: 100%; background-color: blue" />
Tom Faltesek
  • 2,768
  • 1
  • 19
  • 30