Display In Practice

In the following example, notice that the same basic HTML code is used three times in a row. However, the second and third examples have display: inline; & display: inline-block;, respectively.

Notice the differences of these display techniques. Particularly with regard to horizontal and vertical spacing.

As you can see, we have used display: inline; & display: inline-block; to create our first header menus! And in fact, it is often used for that purpose. (More on that later…)