HTML Elements and Dimensions


Published: 2016-06-04
Updated: 2016-06-05
Web: https://fritzthecat-blog.blogspot.com/2016/06/html-elements-and-dimensions.html


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
display
position
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


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

LEGEND
  • LI

  • MAIN

    MARK
    MENU
    MENUITEM
    METER

    OBJECT PARAM
    1. OL

    OUTPUT

    P


    PRE

    PROGRESS
    Q
    S
    SAMP
    SECTION


    SMALL
    SPAN
    STRONG
    SUB
    SUMMARY
    SUP


    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):

           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