HTML Elements and Dimensions

Recently I came across the fact that there are HTML inline-elements that can be sized without setting them to display: inline-block or position: absolute before. It's the INPUT elements, and some others. As I wanted to get clearness about which inline-elements exactly support sizing, I wrote following ....

Playground

In the following "CSS Settings" view, you can alter properties of the elements selected below in the "HTML-Elements" panel (blue selection color). Any settings change will be rendered immediately, with the exception that most inline-elements will ignore width and height. The JavaScript sizes are displayed nearby (clientWidth, offsetWidth, ...). The HTML-panel contains almost all available HTML elements. Hover them for help.

CSS Settings

Element: A

box-sizing	content-box border-box
display	inline block inline-block table table-caption table-header-group table-row-group table-row table-cell table-footer-group inline-table flex inline-flex list-item run-in
position	static (default) relative absolute fixed
left
right
top
bottom

width
height
margin	left	right	top	bottom
border	left	right	top	bottom
padding	left	right	top	bottom

clientWidth	0
clientHeight	0
offsetWidth	11
offsetHeight	19

Click on any element below to see and change its settings.

HTML-Elements, alfabetically

A
ABBR

ADDRESS

ARTICLE

ASIDE

B

BLOCKQUOTE

CAPTION

CITE
CODE
DEL

DETAILS

DFN

DIALOG

DIV

DL

DT

DD

EM

FIELDSET

FIGURE

FIGCAPTION

FOOTER

FORM

H1

H2

H3

H4

H5

H6

HEADER

---

I
IMG






















INS
KBD
KEYGEN
LABEL

LEGEND

LI

MAIN

MARK
MENU
MENUITEM
METER

NAV

1. OL

OUTPUT

P

PRE

PROGRESS
Q
S
SAMP

SECTION

SELECT OPTGROUP OPTION
SMALL
SPAN
STRONG
_SUB

SUMMARY

^SUP
TEXTAREA
TIME

TABLE

TBODY

TD

TFOOT

TH

THEAD

TR

U

• UL

Variable

This HTML-gallery is a nice place for exploring the opportunities that HTML provides nowadays. Did you know that modern browsers provide auto-complete via DATALIST and INPUT elements? Did you know that titled borders are possible via FIELDSET and LEGEND elements? Have you ever used a KEYGEN element?

Take a tour through these elements. For example, click the LI element, or the TABLE element, and check its display value. Some elements even have box-sizing: border-box by default, like TABLE or SELECT.

Try to set CSS width on a display: inline element like A ("anchor"). Try it with an INPUT element (which is an inline element, too). Try to set an inline element to inline-block and watch how JS clientWidth suddenly appears, and also CSS width. When you set its width, the content text seems to remain unaffected, but when you add a border, you will see how the element changes size.

Elements like MENU or DIALOG are rarely supported by browsers.
Others like MAP or DATALIST are invisible, and make sense only in context of other elements.
I dropped the VIDEO and AUDIO elements here.

Element Categorization

The following tables summarize inline, block and inline-block elements. Additionally, for inline-elements, you see whether the element supports sizing, that means you can change its dimensions using CSS width and height.

Mind that the tables below are generated by JavaScript on the fly (by iterating the HTML-gallery above), so their content is browser-specific, and you might see different results with different browsers here!

Inline elements

1. A
2. ABBR
3. B
4. CITE
5. CODE
6. DEL
7. DFN
8. EM
9. I
10. IMG, resizable
11. INS
12. KBD
13. KEYGEN
14. LABEL
15. MARK
16. MENUITEM
17. OBJECT
18. OUTPUT
19. Q
20. S
21. SAMP
22. SMALL
23. SPAN
24. STRONG
25. SUB
26. SUP
27. TIME
28. U
29. VAR

Block elements

1. ADDRESS
2. ARTICLE
3. ASIDE
4. BLOCKQUOTE
5. DETAILS
6. DIALOG
7. DIV
8. DL
9. DT
10. DD
11. FIELDSET
12. FIGURE
13. FIGCAPTION
14. FOOTER
15. FORM
16. H1
17. H2
18. H3
19. H4
20. H5
21. H6
22. HEADER
23. HR
24. LEGEND
25. MAIN
26. MENU
27. NAV
28. OL
29. P
30. PRE
31. SECTION
32. SUMMARY
33. UL

Inline-block elements

1. BUTTON
2. INPUT type = text
3. INPUT type = checkbox
4. INPUT type = button
5. INPUT type = color
6. INPUT type = date
7. INPUT type = datetime
8. INPUT type = datetime-local
9. INPUT type = email
10. INPUT type = file
11. INPUT type = image
12. INPUT type = month
13. INPUT type = password
14. INPUT type = radio
15. INPUT type = range
16. INPUT type = reset
17. INPUT type = search
18. INPUT type = submit
19. INPUT type = tel
20. INPUT type = time
21. INPUT type = url
22. INPUT type = week
23. INPUT list
24. METER
25. PROGRESS
26. SELECT
27. TEXTAREA

Summary

What to learn here?
These are the inline-elements that can be sized (LINUX Firefox 43.0):

• IMG
• all types of INPUT except type = image
• TEXTAREA

       var isSizable = function(element) {
          var style = window.getComputedStyle(element);
          return window.parseInt(style.width) > 0 || window.parseInt(style.height) > 0;
       };