The display property is a bit of an unheralded workhorse in the CSS world. Even though the list of theoretical display property values is quite long, only three of them ever see any use (primarily due to poor browser support on the others): inline, block, and none.
The inline value allows you to define an element to behave as though it were an inline element (like a span or an anchor tag). Conversely, the block value lets you force block-level behavior (like a div or a paragraph). And “display: none” simply causes an element to not display at all.
But despite the display property’s seemingly limited use, you’d be surprised how many CSS techniques rely on this little workhorse to get the job done. Here are five CSS techniques I’ve written about in the past that wouldn’t exist without the help of the display property.
Making Closeable DIVs
In-document message boxes can be quite useful when used for the powers of good — and not, say, to create annoying pop-in ads right in the middle of a page you’re trying to read. Luckily, whether used for good or evil, most all in-document popups come with a “close” option: and that close option is almost always the work of the “display: none” rule. Learn more about creating in-document message boxes here.
Creating RSS-Only Content
As I wrote about in a recent article, hiding content in your RSS feed doesn’t have to require a fancy plug-in — which is good for people who aren’t relying on a fancy content management system to generate their pages. Instead, producing RSS-only content can be as simple as hiding your content in your page with the display property — which is then ignored when picked up by RSS feed readers.
Building Dropdown Menus
If you work on web development long enough, sooner or later some browser is going to throw a bug your way (Internet Explorer 6, I’m looking at you). But just because there’s a bug in the browser doesn’t mean that the fix has to be complicated. In fact, two of the most common Internet Explorer bugs out there — the IE6 Whitespace Bug and the IE Double Margin Float Bug — both use the “display: inline” property to make IE behave properly. Click the bug names for more in-depth information.
So when you get right down to it, the display property is a pretty useful little guy, even if only three of its values are supported. Just imagine how prolific it’d be if all its values were available!