Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML element which defaults to display:inline-block?

Tags:

html

css

<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?

like image 585
700 Software Avatar asked Feb 06 '14 21:02

700 Software


People also ask

What HTML element is inline-block?

The <div> Element.

How are inline elements displayed in HTML?

Inline elements display in a line. They do not force the text after them to a new line. An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line.

What does display inline mean in HTML?

display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width. Read more about display options : http://www.quirksmode.org/css/display.html.

What is the default display of most HTML elements?

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline .


2 Answers

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/

like image 183
Dryden Long Avatar answered Sep 22 '22 17:09

Dryden Long


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.

like image 45
animuson Avatar answered Sep 25 '22 17:09

animuson