91

<div> defaults to block

<span> defaults to inline

Is there one that defaults to inline-block?

If not, what special tag name would be appropriate for me to apply 'inline-block' using CSS?
Or should I stick to using a class?

2
  • I think there is only one - <img>.
    – Jack
    Commented Feb 6, 2014 at 22:17
  • 4
    @jack-tuck That is wrong, see answers. Commented Feb 5, 2017 at 21:23

10 Answers 10

45

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/

6
  • 13
    It shows how widespread the myth about img been inline-block is. Yet it's easy to test. Just use any browser's dom inspector on an un CSS'd img and you'll see that it is display:inline. Or see this JS fiddle: jsfiddle.net/AQ2yp
    – Alohci
    Commented Feb 6, 2014 at 22:15
  • @Alohci I guess you're right, just tested in Chrome, FF and IE and all three came up as inline Commented Feb 6, 2014 at 22:18
  • @DrydenLong you should take into consideration the difference in Web-Browsers
    – Korvo
    Commented Feb 7, 2014 at 11:49
  • 8
    @DrydenLong please for clarity sake remove the wrong information. Commented Feb 5, 2017 at 21:26
  • 1
    @Esger - It's not true that you can't set height and width for an inline element. You can't set the height and width for a non-replaced inline element. img is a replaced element, so that limitation does not apply. "inline-block" literally means "inline level, block container". Replaced elements are not block containers, since as they are replaced, they don't contain anything. Nor could they in any way be described as behaving like they were block containers. Their similarity to inline-block elements is limited to their display-outside behaviour, i.e. to their inline-level ness.
    – Alohci
    Commented Jul 1, 2020 at 23:21
24

Is there one that defaults to inline-block?

Strictly speaking, no there isn't. The W3 HTML specifications do not ever specify default CSS property values for any elements. They do provide a "default style sheet" for HTML 4, but developers are only encouraged to use it - it is not a requirement or any sort of mandate. The HTML 5 specifications indicate "typical default display properties" but, again, those are not required (also keep in mind that HTML 5 is still a working draft anyways).

So that leaves all default values up to the browser and how the developers actually feel elements should be displayed to a user. No one can guarantee that a specific element will display as inline-block or any other way in someone's browser. You should always explicitly set that if you want it to happen. Don't rely on "defaults."

If not, what special tag name would be appropriate for me to apply 'inline-block' using CSS? Or should I stick to using a class?

This is up to you and how you are designing your pages. You should always use elements that are semantically appropriate to the content contained within them. If the element will always be used in a context which will require inline-block display, by all means set it to that in your style sheet. Otherwise, you will have to resort to classes or more specific selectors in order to make your elements display properly.

7

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"

1
  • Nice, +1. In Firefox it's only button and select. IE 11 has all 4 as inline-block Commented Feb 6, 2014 at 22:30
5

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

CSS

sl {
    display: inline-block;
}

Usage

<sl>inline block stuff</sl>
4

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
3

In principle, it depends on the browser what the default value for the display property is for each element. Even HTML5 drafts do not prescribe what values must be used, though it presents “expected rendering” of elements in terms of CSS.

According the default style sheet for HTML in the CSS 2.1 specification, the elements that have display: inline-block by default are button, input, select, and textarea. Browsers use such settings, except that in Firefox, this only applies to button and select.

In the Rendering section of HTML5 CR, the meter and progress elements are additionally describes as having inline block as “expected rendering”, and browsers that have implemented these elements appear to behave that way. The keygen element is also described as being an inline block, but Firefox does not do that (it implemented keygen internally as select in the DOM); IE does not support keygen at all; Chrome implements it as suggested.

Since all of these elements have rather specialized meanings, functionality, and rendering idiosyncracies, none of them is adequate for general use as an element that is an inline block by default and may have various meanings. What you can use for such an element is normally span or div, depending on whether you prefer inline or block as the default rendering.

3

Now you can create a Custom Element (for example: <inline-block> or whatever) that will have its CSS property display set to inline-block by default.

customElements.define( 'inline-block', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `<style> :host { display: inline-block } </style>
                          <slot></slot>`
    }
} )
#hw { background-color: lightblue }
<inline-block id="hw">Hello World</inline-block>

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

0
1

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.

0
-14

YES there is an element that defaults to inline.

The answer is the span element.

<span>
4
  • 2
    OP was asking for inline-block not inline Commented Feb 6, 2014 at 22:35
  • ahh didn't catch that.
    – httpgio
    Commented Feb 6, 2014 at 22:36
  • 1
    If you are using inline-block elements, beware with IE! you need to apply zoom:1 to have it cross browser compatible with IE. You've been warned
    – httpgio
    Commented Feb 6, 2014 at 22:37
  • 1
    Aside from being the wrong display value, this is also rather useless anyways. All elements which do not otherwise have a display property set in the browser's default style sheet will be displayed inline - it's the initial value for that property.
    – animuson
    Commented Feb 7, 2014 at 19:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.