1) Creating Menu with Display Property

What we will Create?

Display Menu

Let us start with a basic nav menu. I strongly recommend you to follow along in the code editor JSFiddle that is the way to learn more efficiently.

Run this file and check how it looks like. Now we will add some CSS to make it more readable.

>>We will use padding so that the area to be selected in a link increases

Menu

You will see how the padding is added to each link. So we can click on the text as well as the area covered by padding.

Key Points:

  1. You see although the padding is added to the links inside nav still the padding of nav element has not expanded around it. This is because this is the default behavior of an inline element.
  2. Change the property to inline-block to change this behavior.
  3. Css Example

    Although this looks fine to me. But I still want to remove the extra space from each menu item. We can do this by setting the font-size to zero in the parent element

    Example CSS