When is it a good idea to use the CSS display property?

Question

I think I first learned of this property when I thought "I should put this list of items in a ul, but I want it to be laid out horizontally. I wonder if I can do that with CSS?" When I googled this, I found a couple of sites suggesting that I create a CSS rule that would change the value of the display property of the li elements to inline. I've also seen the suggestion that a div (or other block element) be given display: table-cell in order to force the vertical align property to work. These techniques seem kind of hacky. Does that make sense?

This might not be a good analogy, but it seems like trying to ride a car as if it were a motorcycle. Yeah, I could replace the steering wheel with handle bars, wear a helmet, and remove all the passenger seating, but how the heck is a car going to drive on two wheels??

Answer 1

Basically the principle is:

• Markup is semantic;
• CSS is for display.

The lines in practice blur somewhat but it's a good starting point.

So a list is a way of creating a flat or hierarchical group of items. You can use display to change that from a vertical list to a horizontal list (display: inline or using float), etc.

So you use the display property where it's appropriate to how you want your markup to appear. Sound vague? It is but I guess so is the question.

Answer 2

A list is a list is a list as they said it. It's a list of thing. How you display it, well, it's up to how you want to visualize it, right?

It's all about separation of concern. One is what the thing is (LI, UL, OL), the other one is how you display it (CSS). It does not have to be tied up tightly together.