One of the most powerful & useful properties in all CSS is, without a doubt, the display property. And yet, it is also one of the least well known, especially by those just starting out with CSS. In this post I’ll try to shed some light on this little gem.
A bit of an introduction
The W3C specifies that the initial display value of all elements is inline. Some of you may raise a brow in disbelief, and with good reason. What they didn’t specify is that the display property is sensitive to other properties. That is to say that some elements automatically change their default display value according to other properties they might have applied to them.
Practical example: divs and ems. By default, they both act as inline elements. Add width/height or float to them and you start to see a difference. While the ems keep being displayed as inline elements, the divs are rendered as block elements, which is what we’re used to seeing.
Because of this slightly esoteric behavior of the display property, I find it easier to think of divs and forms, etc. as block level elements, while all the rest as inline. Most of the time, the default values are sufficient and adequate but there are times when maintaining semantic code while having a specific element behavior requires a bit of display tinkering.
So, what’s the big deal?
Instead of writing a lengthy and, otherwise, boring post about how this value does this and that value does that, I went a bit further and made a demo page showcasing all the 17 possible display values in a retro kind of Dharma Initiative interface. Yeah, yeah, Lost is over, boo-hoo.
So, clicky on the demo button and have yourself a merry time (best viewed with Firefox 3.6). And don’t forget to get back here and leave a comment!
Hopefully, you had a good time playing around with the virtual display keyboard and, who knows, maybe even learned a thing or two about the mother of all structural CSS properties – display.
Nice, much more interesting this way, thanks!
Great tutorial and the unique demo is sweet.
A bit of constructive feedback…
The animated green scan line is really annoying.
It’d be nice if there was a section saying this works in browsers X, Y, Z… for each option.
Keep up the good work
Article added to http://csshead.com
Thanks for your kind words! I’m not going to venture and take the scan line out just yet. Best to wait and see if others agree with you on this one. Popular vote, FTW! As for browser compatibility, it’s part of my new direction to stop caring about it. Standards should be our concern, not caring for shotty software. This last phrase may have just cost me a huge flame war…
You have to get rid of the cool looking but frigging distrubing scan line.
I agree with you, screw the ancient browsers and salut the modern technologies but I go further and curse also those painfully slow agencies who answers for new standards. They are sitting on the break pedal.
Well, the demo is really sweet and with a lot of retro style. Just congratulation for the result and for the big effort behind it.
Nicely done, thanks for the effort! I definitely learnt something.
Man, I miss Lost…
Really good. And not boring at all! Thanks.
FAIL -total fail.
Now, dont get me wrong, all the information is there (maybe) but presented how?
It’s like a 4 star restaurant decided to combine the hide and seek joy of an Easter Egg/Treasure Hunt with a 4 course meal, creating the buffet from hell!
WHAT are we doing (supposed to be)?
Answer: Showing off the different nuances and caveats of the CSS Display property.
Obviously, the best approach would be some kind of table that listed and presented them ALL so that we could see them all!
If we MUST use some kind of metaphor, the one to use would be a ECommerce “product comparison” metaphor, where the buyer (me) chooses various display options then clicks “Compare” to see how they look side by side.
KNOWLEDGE! Seeing is power!
Instead we have a well executed but totally useless retro TV static transition, perfect for TV Guide hawking old reruns of “I Love Lucy
” and “Matlock” but FAIL as a teaching tool.
Ditto from PatternHead
about the annoying green scan line animation
and yes, a cross browser dissertation would be of admirable value.
Sorry to be so blunt, but I figure it would be a good counterpoint to the fawning over the “Emperor’s New Clothes”
While your bluntness, coupled with the anonymity of your post naturally lead me to see your comment as nothing but trolling, I must admit you raise a few good questions. Perhaps tabulating and comparing the different values of the display property as you suggested would have been a more up-front approach. The point of the “totally useless retro TV” interface was to present the data in an engaging and visually appealing manner, suited mostly for those starting out with CSS that find looking at bland tables boring and at all engaging.
The green scan will be removed later tonight, as it is clear that popular vote demands it.
As I mentioned earlier, the lack of cross browser info is part of a new direction I am taking.
Thanks for the comment. While blunt and perhaps a bit offensive, it was constructive and I will take your points into consideration in future posts.
Don’t be a dick.
“The point of the “totally useless retro TV” interface was to present the data in an engaging and visually appealing manner,”
Therein lies the rub.
The fact of the matter is, much of what we are tasked with IS boring, or pedantic or plain.
But the nature of that ‘interface’ is buy design I think. SHOULD we notice the picture frame when we look at the Mona Lisa? Should the museum wall jump out at us with stunning, beautiful colors and motifs or should it fade into the background, secondary to the art it showcases?
The challenge to provide a display ‘worthy of our artistic skills’ will often clash with the functional requirements of our job or task.
Your demo also brings into view a curious cultural or chronological bias : We both have seen those Green Screens of old, however , to much of this audience, I am sure they may seem a novel but truly anachronistic presentation. They just wont “get it”, (except for the contemporary ‘Lost’ reference via which most will have had their only encounter with such computer hardware)
This experience could be a very telling subject for a future post: Can you KILL an application by inserting a “Stellar user interface?”
If we DO choose to revisit the “retro” look, how about a Diner?
with the various INLINE CSS options being applied to the carousel of divs (each Div is a customer breakfast order, formatted different ways due to the CSS options outlined in your article)
Flashy, and perhaps “above and beyond the call of duty” perhaps, but achieving the key functionality needed for a presentation: showing multiple options at the same time for comparison and contrast
(eh?)
I must admit I first pegged you as a bit of a jerk, mostly on account of your bluntness. It’s become clear to me that you are, indeed, a man of reason and I can understand and relate to your standpoint. Moreover, I respect your opinion, largely because it’s well argued.
Indeed, our work is, sometimes, tedious and boring, even pedantic as you say. But should we not try to see it in a more engaging fashion? Perhaps I, unwillingly, cared more about presentation than function. But I will not excuse myself, for as a great man once said: “my house, my rules”.
Indeed, the newer audience may have a hard time understanding the origins of that green screen or why the monitor and keyboard are pale and not “apple white”. I think they’d have an even harder time understanding the origins of a ’50s diner, even with all the splendid design it brings along.
In the end, I have to commend you for the diner idea. It would truly be a stunning visual way to learn something like the display property but, in my opinion, just as cumbersome as my “retro TV” interface for the very reasons you pointed out.
Thank you very, very much for your comment. It’s people like you that drive me to better myself and my work and continuously challenge my thought patterns. Cheers, friend!
I scanned through Steve’s first comment and can not be bothered with the next one! The display property can be tricky at times. You have set up a nice visual way to show the effects of different values to the display property. I have bookmarked the page!
Glad to see you enjoyed the post! Steve actually brings up some good points in his second comment, so don’t dismiss him on account of bluntness.
I think steve is on crack or maybe trying to make people think he is really smart. I thought your way of presenting the information was very unique and interesting. I give you a big thumbs up. I think I am gonna have to subscribe to your future articles
got a parsing error on your subscribe button.
Thanks for the kind words, Jamie. About the RSS feed, I’m working on the issue. I still don’t know why it’s acting up. It’s surely because I moved hosts recently but so far the problem has not been identified. Don’t worry, though, you can still follow @sickdesigner on Twitter or join the Facebook page. And as soon as the RSS feed is up and running, I’ll be sure to let you know!
I never really got the whole adding float/width/height but having the element still being inline thing, which is why I always add display: block. Your article definitely helps explain what’s going on there, thanks.
By the way, I love how the comments is on the left and the funny labels, awesome layout.
In your “inline-table” description:
“display: inline-table applied to element.
Such as with the run-in value, display: inline-table is mostly useless as it’s far more semantic to actually use a table element for expressing data in a tabular fashion, even inline.”
Did you mean “far more” or “far less”?
Of the two: a table element to express tabular data and a different element with display: inline-table to express the same tabular data, which do you reckon is more semantic? So, yes, “far more” would be it.
My bad, I read it the other way around.
Great post anyways (twitted).
Excellent blog, thanks
Great post. I love the way you handle the “Steve” comments very “Don Corleone”
…while he makes some interesting points, its really much ado about nothing I think. Your stuff is creative and original as usual, keep bringing the sickness my friend I have fired my doctor 
Its amazing article , nice one
original and amazing work !!
I want to subscribe the feed, but could not . Please fix it.
Many thanks
I will Arun, the fixes are in the works
Thanks!
Very interesting and enlightening. However, one point – the W3C spec says the default value of display is “inline” for all elements, unless otherwise specified in the user agent stylesheet. Pretty much all browsers under the sun set it as “block” for divs, and likewise certain other elements have default values other than “inline” as accepted standard in all user-agent stylesheets.
Nice article and demonstration
Thank you!
Very useful tool. Maybe you could improve it if rules were applied to just one element type. That would allow for more effective comparison, I guess. Apart from that, the retro TV lends a ludic and pleasant atmosphere to the whole experience. Humble congratulations.