1

Just noticed this issue now, if I have a span element I can make it the full width of the parent container if I apply the style display: block but I've noticed the same doesn't happen when the element is a button. Question is, why ? Why does a button behave differently (be default it's a block element if I remember correctly)

I've fixed it by applying width:100% to the button but not really sure why it behaves differently.

Fiddle for testing: https://jsfiddle.net/9k3pjy9e/1/

CanIHazCookieNow
  • 112
  • 1
  • 10
  • Browsers add default styles to some elements, including buttons. You can override them but if you don't, they will be displayed the way the browser sees fit. In case of buttons, most browsers 'believe' they should have width based on value (quite similar to inline elements) and also some padding and borders. This ensures button elements look like buttons out-of-box, without custom styles. Don't forget to check the answer mentioned in prev. comment – mzrnsh Nov 29 '16 at 18:23

1 Answers1

2

Button: = inline-block "By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button."

More info here

Span: = inline An inline element does not start on a new line and only takes up as much width as necessary.

set it to display: block; then:

Block Element: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

So while this works with a span element, for button element width needs to be set.

Syden
  • 8,425
  • 5
  • 26
  • 45
  • I suspect that someone down-voted your answer because it didn't explain why the **button** element behaves differently from the **span** element. – Bill Bell Nov 29 '16 at 18:17
  • Thanks Bill, honestly I think it was down-voted because I did not comply with the duplicate, but frankly I found it too broad for this specific case. I tried to polish it a bit more, hope it helps to clarify. Regards. – Syden Nov 29 '16 at 18:25
  • That could very well be true. I hate naked down votes. – Bill Bell Nov 29 '16 at 18:29
  • I would say the questions falls more around of why doesn't a button behave like a span with display block (since a button is already a block by default). I kinda get the default behavior of wrapping to the content but didn't see anything in the specs that stated that – CanIHazCookieNow Nov 29 '16 at 18:48
  • Because ` – Syden Nov 29 '16 at 18:54