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 ....
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.
Click on any element below to see and change its settings.
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.
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!
What to learn here?
These are the inline-elements that can be sized (LINUX Firefox 43.0):
var isSizable = function(element) {
var style = window.getComputedStyle(element);
return window.parseInt(style.width) > 0 || window.parseInt(style.height) > 0;
};
ɔ⃝ Fritz Ritzberger, 2016-06-04