HTML element which defaults to display:inline-block?

Question

defaults to block

defaults to inline

Is there one that defaults to inline-

相关标签:

Answer 1

button, textarea, input, and select default to inline-block.

In the event you would want to inline-block a div you'd give it a class name.

.inline-block {
    display: inline-block
}

Then...

<div class="inline-block"></div>

CORRECTION

I was mistaken about img. It seems it defaults to inline and not inline-block

Answer 2

This isn't really a true answer to the question right now, but with enough support, it may someday be.

<seg> short for "segment". As in, segments of a line.

with the polyfill:

<style> seg { display: inline-block; } </style>

It really would be nice if there was an official one, but there is not, so here is the best (IMO) suggested name for such an element that I know of.

Answer 3

You can check my codepen with all HTML elements and their display property by default. Some tags are syntax-broken, but it does not matter for our purpose.

Currently, there are 5 elements with display: inline-block in FF :

1. <button>
2. <select>
3. <meter>
4. <progress>
5. <marquee>

And additional 2 (including 5 above) in Chrome:

1. textarea
2. input

Answer 4

From what I can tell the <img> tag is the only inline-block by default. To be on the safe side I would recommend a class, you never know when changing all elements of a certain type will come back to bite you. Or, you could always make up your own tag and assign display:inline-block; to it. This way you aren't changing the default functionality of standard elements...

EDIT

It also appears that button, textarea, input, and select elements are also inline-block

Sources:

According to this img is inline-block http://dev.w3.org/html5/markup/img.html#img-display

And here claims that button, textarea, etc. are as well: http://www.w3.org/TR/CSS2/sample.html

EDIT #2

While the source above claims that img tags are inline-block it seems (thanks to Alohci) that they are just inline http://jsfiddle.net/AQ2yp/

The following were tested in Firefox:

button is inline-block: http://jsfiddle.net/GLS4P/

textarea is inline: http://jsfiddle.net/235vc/

input is inline: http://jsfiddle.net/RFKe8/

select is inline-block: http://jsfiddle.net/5B4Gs/

Answer 5

My solution to this is declaring what I call a slice.

CSS

sl {
    display: inline-block;
}

Usage

<sl>inline block stuff</sl>

Answer 6

Here is a Fiddle that gets the default display value for a majority of HTML tags.

Fiddle

In chrome, the default inline-block elements are: "INPUT", "BUTTON", "TEXTAREA", "SELECT"