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:

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
clientHeight
offsetWidth
offsetHeight

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

Block elements

Inline-block elements

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;
       };