{"id":51916,"date":"2021-03-14T03:01:26","date_gmt":"2021-03-13T17:01:26","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51916"},"modified":"2021-03-13T13:42:50","modified_gmt":"2021-03-13T03:42:50","slug":"css-display-inline-block-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-display-inline-block-primer-tutorial\/","title":{"rendered":"CSS Display Inline-Block Primer Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS Display Inline-Block Primer Tutorial<\/p><\/div>\n

The CSS property “display”<\/a> is enormously useful for us here at RJM programming. The way we most commonly use it is in the form (for element ID=eleid) …<\/p>\n


\n<style>
\n #eleid { display: none; }
\n<\/style>
\n<\/code><\/p>\n

… to make element “eleid” be invisible (and whitespace it would have occupied is squished up, as distinct from “#eleid { visibility: hidden; }” … as you can see that is useful. Now, putting that element “eleid” back to being visible can be achieved via …<\/p>\n\n\n\n\n
<\/th>\nFor “block” elements (eg. “table”, “iframe”)<\/th>\nFor “inline” elements (eg. :”span”, “a”)<\/th>\n<\/tr>\n
CSS<\/td>\n\n
\n<style>
\n #eleid { display: block; }
\n<\/style>
\n<\/code>\n<\/td>\n		\n
\n<style>
\n #eleid { display: inline-block; }
\n<\/style>
\n<\/code>\n<\/td>\n<\/tr>\n
Javascript<\/td>\n\n
\ndocument.getElementById('eleid').style.display='block';
\n<\/code>\n<\/td>\n		\n
\ndocument.getElementById('eleid').style.display='inline-block';
\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n

… but the other day we stumbled on an incredible by-product of this topic. We accidentally did …<\/p>\n


\n<style>
\n * { display: inline-block; }
\n<\/style>
\n<\/code><\/p>\n

… and we were gobsmacked by the result. So today we’ve written a “proof of concept” web application for you to see for yourself how display_inline_block_example_combobox.htm<\/a>‘s “proof of concept” web application<\/a> works …<\/p>\n