What is the HTML buttons' default display mode?

Question

Each element in HTML has a default display mode like "block", "inline", etc. For example, the "div" display is "block", and the "span" display is "inline".

I need a display mode like the "button" elements. It's more like the "inline" because you can put some of them in one line, but unlike the "inline" they can have width property.

OK, enough, let's back to my question. Which display mode do HTML buttons have?

Look at the available [`display`](http://www.w3.org/TR/CSS21/visuren.html#display-prop) property-values, and it'll show you the type that you want, though it's not necessarily the same, by default, in every browser. — David Thomas, Feb 10 '15 at 15:03
@TylerH: no, it's an `inline-block`, see: http://www.w3.org/TR/CSS2/sample.html — GreyRoofPigeon, Feb 10 '15 at 15:10
@LinkinTED In that case, MDN is wrong: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button — TylerH, Feb 10 '15 at 15:15
@LinkinTED you linked to a stylesheet not a definition of element type for a button. — hungerstar, Feb 10 '15 at 15:24
Yes, it is. To check what's right I made this [JSFiddle](http://jsfiddle.net/8u7yLmdh/1/). According to http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block an inline-block can have width/height and an inline element can't... — GreyRoofPigeon, Feb 10 '15 at 15:25
@hungerstar, check my testcase in my last comment... it's an `inline-block`.... — GreyRoofPigeon, Feb 10 '15 at 15:27

score 22 · Accepted Answer · answered Feb 10 '15 at 15:09

A button is by default an inline-block, so multiple buttons without a line break or some will be displayed next to each other:

<button>button 1</button>
<button>button 2</button>

If you want them to be under each other, you could display them as block:

button {
  display: block;
}

<button>button 1</button>
<button>button 2</button>

score -2 · Answer 2 · answered May 08 '21 at 08:34

-2

And by changing button's display value to block, you could easily center it like so: (suppose it has a class of btn)

.btn{
    display: block;
    margin: 2em auto;
}

answered May 08 '21 at 08:34

Sanaz Bahmani

1
3

What is the HTML buttons' default display mode?

2 Answers2

Linked