Problems with horizontal menu

Question

I'm having some problems in trying to distinguish the difference between display: block and display: inline-block in the example of horizontal menu.

My fiddle: https://jsfiddle.net/4dg0ukk6/

The following lines of code is extracted from the fiddle link mentioned above

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

Should I use display: block or display: inline-block? As I see the result is almost the same. What is exactly the difference between them in this case?

Possible duplicate of [What is the difference between display: inline and display: inline-block?](https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block) — Maharkus, Sep 29 '17 at 15:10
remove the `float: left` and try switching them, and you can see the difference... well, here both produce the same result, and I guess it doesn't matter :) — kukkuz, Sep 29 '17 at 15:10
@Maharkus This question is not really a duplicate of the link you posted. The OP seems familiar with the difference between the two, but is not understanding why he cannot see the difference in the code. See my answer below which addresses this. — kojow7, Sep 29 '17 at 15:24

score 2 · Answer 1 · answered Sep 29 '17 at 15:10

2

You notice no differences because you're applying that style to a single child inside a parent.

Check here, I've put two links inside the same li, notice the difference between

li a {
  display: block;

and

li a {
  display: inline-block;

Display: Block

Display: Inline-block

answered Sep 29 '17 at 15:10

Luca De Nardi

2,280
16
35

I've got it! :D Thanks so much! – DunDev Sep 29 '17 at 15:16

kojow7 · Answer 2 · 2017-09-29T15:22:04.777

The issue is not so much with your a element as it is with your li element. This is because the a elements are nested inside of your li elements.

Your li elements are currently being floated to the left so will line up next to each other. Any changes you make to the a elements only effect how they display inside of the li element. In your case it does not really make much of a difference unless you have more than one a element inside each li.

If you really want to see how things change you will want to change the display of the parent li elements. So instead of the following code:

li {
  float: left;
}

try one of these two options to see the difference:

li {
  display: block;
}

or

li {
  display: inline-block;
}

score 0 · Answer 3 · answered Sep 29 '17 at 15:10

Elements with display:inline-block are like display:inline elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.

Difference of supported styles as summary:

inline: only margin-left, margin-right, padding-left, padding-right
inline-block: margin, padding, height, width

score 0 · Answer 4 · answered Sep 29 '17 at 15:15

0

display: block

When You use display:block to li a you can have one in one li in one row

in other hand

display: inline-block When You use display:inline-block to li a you can have multiple in one li in one row

answered Sep 29 '17 at 15:15

tushgraph

38
8

Problems with horizontal menu

4 Answers4